CSS background-size：封面+ background-attachment：固定的剪辑背景图片

Question

我有一个包含背景图像的数字列表。类似于以下内容：

<ul>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
</ul>

这些图像中的每个图像都将其background-size设置为，cover并background-attachment设置为fixed。

figure {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-attachment: fixed;
}

当每个图形都占据整个视口时，这可以正常工作，但是如果存在任何偏移，则背景图像将被裁剪。

。

我希望图像可以垂直或水平剪切，但不能同时剪切，并且要以图形本身的大小为中心。

我知道有JavaScript解决方案，但是有没有办法使用CSS做到这一点？

Answer 1

不幸的是，这只是固定位置在CSS中的工作原理，而在纯CSS中则无法解决-您必须使用Javascript。

之所以出现这种情况是由于组合background-attachment: fixed和background-size: cover。当您指定background-attachment: fixed它时，它实际上会使background- image行为就像是一幅position: fixed图像，这意味着它是从页面流和定位上下文中取出的，并且相对于视口而不是相对于其背景图像的元素。

因此，每当您同时使用这些属性时，cover无论元素本身的大小如何，都会相对于视口的大小来计算值，这就是为什么当元素与视口的大小相同但被裁剪时，它可以按预期工作的原因元素小于视口时的意外方式。

为了解决这个问题，您基本上需要使用background-attachment: scroll事件监听器并将其绑定到scrollJS中的事件，该事件监听器手动更新background- position相对于窗口已滚动的距离的相对值，以模拟固定位置，但仍background-size: cover相对于容器元素而不是视口进行计算。