我有一个包含背景图像的数字列表。类似以下内容：
<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>
这些图像中的每一个都将其背景大小设置为覆盖，背景附件设置为固定。
figure {
width: 100%;
height: 100%;
background-size: cover;
background-attachment: fixed;
}
当每个图形占据整个视口时，这样做很好，但是如果有任何类型的偏移，则背景图像被剪切。
据我所知，这是设计(https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values)。
我想要图像垂直或水平剪辑，但不是两者，并且以图形本身的大小为中心。
我知道有javascript解决方案，但是有没有办法使用CSS？
这是一个工作示例：http://codepen.io/Godwin/pen/KepiJ
解决方法
不幸的是，这只是一个固定的定位工作在CSS中的工件，而纯CSS中没有办法 – 你必须使用Javascript。
原因是由于background-attachment：fixed和background-size：cover的组合。当您指定background-attachment：固定它本质上会使背景图像的行为就像是一个位置：固定图像，这意味着它被从页面流和定位上下文中取出，并且变得相对于视口而不是元素的背景图像。
因此，无论何时使用这些属性，相对于视口大小计算盖值，而不考虑元素本身的大小，这就是为什么当元素与视口的大小相同但被裁剪时，它的预期工作原理当元素小于视口时，以意想不到的方式。
为了解决这个问题，您基本上需要使用background-attachment：滚动并将事件侦听器绑定到JS中的滚动事件，手动更新背景位置相对于窗口滚动的距离，以模拟固定位置，但仍然计算background-size：相对于容器元素而不是视口的coverage。
