我想设置一个固定背景图片,同时也覆盖整个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>
如何让这两个属性同时生效?它们是否不兼容?
编辑:由于某种原因,固定属性是相对于视口而非元素本身 屏幕越高,图像就会变得更大。有什么解决办法吗?
background-attachment: fixed
明确告诉将背景位置固定到视口:https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment - Gaël Barbin