CSS背景固定和覆盖

Question

我想设置一个固定的背景图像，该图像也覆盖 div，但是由于某些原因，当我将固定添加到CSS时，图像会拉伸到超出div边界的范围。

这是2个示例，一个示例具有固定的尺寸（不正确的尺寸），另一个具有正确的尺寸，但它不是固定的（它随页面滚动）

#incorrect{
  min-height:100px;
  background: url('http://034.83e.myftpupload.com/wp-content/uploads/2015/04/entete_image.png') no-repeat fixed center/cover;
  }

#correct{
  min-height:100px;
  background: url('http://034.83e.myftpupload.com/wp-content/uploads/2015/04/entete_image.png') no-repeat center/cover;
  }

<div id="incorrect"></div>

<br>

<div id="correct"></div>

您如何使这两个属性一起工作？它们不兼容吗？

编辑：由于某种原因，固定属性是相对于视口而不是元素本身的，屏幕越高，图像获得的越大。有没有转机？

Answer 1

纯CSS无法实现您要尝试执行的操作。

使用background-attachment: fixed;时，图像的作用与相同position:fixed。

位置：已通过https://developer.mozilla.org/zh-CN/docs/Web/CSS/position进行了解释

不要为元素留出空间。而是将其放置在相对于屏幕视口的指定位置，并且在滚动时不要移动它。打印时，将其放置在每页上的该固定位置上。

因此，它的作用是将背景图像“移出div”并相对于视口本身调整大小。这就是为什么它“缩放”和“剪切”您的背景图像。

您可以使用JavaScript或jQuery解决此问题。这是一个以您的代码为例的代码段：

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('#incorrect').css('background-position', 'left ' + ((scrolledY)) + 'px');
});

#incorrect{
  min-height:100px;
  background: url('http://034.83e.myftpupload.com/wp-content/uploads/2015/04/entete_image.png') no-repeat scroll center/cover;
  }

#correct{
  min-height:100px;
  background: url('http://034.83e.myftpupload.com/wp-content/uploads/2015/04/entete_image.png') no-repeat center/cover;
  }

div{margin-bottom:200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="incorrect"></div>

<br>

<div id="correct"></div>