CSS 背景固定和覆盖

Question

我想设置一个固定背景图片，同时也覆盖整个div，但是当我在CSS中添加“fixed”时，由于某种原因，图片被拉伸到了div的边界之外。以下是两个示例，一个使用了“fixed”（尺寸不正确），另一个使用了正确的尺寸，但它不是固定的（随页面滚动）。

#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>

如何让这两个属性同时生效？它们是否不兼容？

编辑：由于某种原因，固定属性是相对于视口而非元素本身 屏幕越高，图像就会变得更大。有什么解决办法吗？

- BassMHL

---

你是在滚动div吗？还是希望它在视口滚动时保持固定...记住，div将随着页面滚动并将其背景一起裁剪。 - misterManSam

当您运行我添加的代码片段时，您会发现固定的图像不会滚动，而非固定的图像（正确尺寸）会滚动。我希望图像在滚动时保持固定，但以与CSS覆盖属性相同的方式覆盖div。 - BassMHL

关于您的编辑，background-attachment: fixed明确告诉将背景位置固定到视口：https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment - Gaël Barbin

是的，我也注意到了。那么有没有办法扭转局面呢？ - BassMHL

Answer 1

使用纯CSS无法实现您想要做的事情。

当您使用background-attachment: fixed;时，它使图像的行为与position:fixed相同。

https://developer.mozilla.org/en-US/docs/Web/CSS/position通过解释position:fixed

不要为元素留下空间。相反，在屏幕视口的指定位置上定位它，并在滚动时不移动它。在打印时，将其定位在每个页面上的固定位置。

所以它所做的是将您的背景图像“从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>

- xengravity

Answer 2

请尝试以下方法：

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

- SuperVeetz

---

它不能工作。这只是重新表达和去除了封面。http://jsfiddle.net/z46gapL8/2/ - BassMHL