背景图片被剪裁 Chrome/Safari

Question

我有一个 div 的背景图片设置为覆盖。我将图像容器的大小设置为比所有边的 window 大 100px。然后我 tweenlite 根据鼠标位置移动背景。

在 FF 中效果很好。在 Chrome/Safari 中没有那么多。背景图片看起来被剪裁了。

这里有一个 link 可以说明我的问题：http://codepen.io/iknowbryan/pen/xENgrX

.bg{
  background: url(https://unsplash.it/1800/1100/?random) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: absolute;
  top: -100px;
  left: -100px;
  bottom: -100px;
  right: -100px;
}

有什么想法吗？！

Answer 1

打断背景。有时背景定义可以是"sensative".

.bg{
  background-image: url(https://unsplash.it/1800/1100/?random);
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  position: absolute;
  top: -100px;
  left: -100px;
  bottom: -100px;
  right: -100px;
}

Answer 2

你把它固定在背景上把它去掉。

background: url(https://unsplash.it/1800/1100/?random) no-repeat center;

背景图片被剪裁 Chrome/Safari

Background image getting clipped in Chrome/Safari

javascript

css

safari

google-chrome

gsap