1

我用它来设置大小，它适用于可以处理一些 xy 失真的抽象图像。

body{
  background:  url('foo/images/flowers.jpg');
  background-size:  100%;
}

然而，随着内容向下扩展，这不起作用，因为图像开始重复。

我注意到，无论您向下滚动多远，推特的一张图片都不会改变。

它的行为就像

position: fixed

我可以使用带有背景图像和位置固定的 div，但随后我将失去body标签提供的自动缩放与background-size: 100%

4

3 回答 3

2

使用值为的background-attachment属性fixed。

于 2013-05-20T16:29:08.983 回答
2

尝试这个：

#element { 
  background: #fff url("http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Scitech/660/371/tardar-sauce-the-cat.jpg?ve=1");
  background-attachment: fixed;
  background-repeat: no-repeat;  
}

演示

于 2013-05-20T16:32:45.167 回答
0

多亏了 CSS3 中的 background-size 属性，我们可以纯粹通过 CSS 来做到这一点。我们将使用 html 元素（比 body 更好，因为它总是至少是浏览器窗口的高度）。我们在其上设置了一个固定且居中的背景，然后使用设置为 cover 关键字的 background-size 调整其大小。

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
于 2013-05-20T16:30:15.233 回答