CSS background-size:封面+背景附件:固定剪辑背景图片

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

当每个图形占据整个视口时,这可以正常工作,但如果存在任何类型的偏移,则背景图像被剪切.

据我所知,这是设计(https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values).

我希望图像可以垂直或水平剪辑,但不能同时剪辑,而是以图形本身的大小为中心.

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

这是一个工作示例:http://codepen.io/Godwin/pen/KepiJ

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相对于容器元素而不是视口计算.

Answer 2

有一个jQuery修复此问题:http://jsfiddle.net/QN9cH/1/ 我知道它不是最佳的,但至少它的工作:)

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});