Question

使用此示例：http://www.meridianapps.com/

我喜欢当您打开浏览器时背景图像扩展和放大的方式。但如果您尝试最小化浏览器，它也有最小宽度。

我想复制一下。有人能指出我可以使用插件或代码将这样的内容插入我的网站吗？

Answer 1

他们正在使用background-size: cover;缩放背景图片

......尽可能小，同时确保其尺寸大于或等于的相应尺寸背景定位区。

Here are the docs from Mozilla.

根据Can I use...，此属性应该可以在IE8以外的任何浏览器中使用。

Answer 2

令人敬畏，轻松，渐进的CSS3方式 由于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;
}

取自here

如何复制此背景图像效果？

2 个答案: