Question

我想设置固定背景图片，涵盖 div，但出于某种原因，当我将修复添加到CSS时，图像被拉伸超出div的边界。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

编辑：出于某种原因，the fixed property is relative to the viewport and not to the element itself屏幕越高，图片越大。有转机吗？

Answer 1

使用纯CSS无法实现您的目标。

使用background-attachment: fixed;时，图片的行为与position:fixed相同。

位置：已修复通过https://developer.mozilla.org/en-US/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>

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;
}

CSS背景修复和封面

2 个答案: