背景图像在 Chrome/Safari 中被剪裁答案

【问题标题】：Background image getting clipped in Chrome/Safari背景图像在 Chrome/Safari 中被剪裁
【发布时间】：2017-03-10 17:54:45
【问题描述】：

我有一个设置为覆盖背景图像的 div。我将图像容器的大小设置为比所有侧面的窗口大 100 像素。然后我是 tweenlite 根据鼠标位置移动背景。

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

这是一个说明我的问题的链接：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;
}

有什么想法吗？！

【问题讨论】：

标签： javascript css google-chrome safari gsap

【解决方案1】：

你把固定在后台去掉吧。

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

【讨论】：

【解决方案2】：

打破背景。有时背景定义可能是“敏感的”。

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

【讨论】：