Question

我有一个背景图像设置为div的div。我将图像容器的大小设置为比所有侧面的窗口大100px。然后我是tweenlite基于鼠标pos移动背景。

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

有什么想法吗？！

Answer 1

你把固定在背景上删除它。

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

Answer 2

突破背景。有时，背景定义可以是敏感的＆＃34;。

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

在Chrome / Safari中剪辑的背景图像

2 个答案: