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

时间:2013-05-16 17:15:41

标签: javascript jquery html5 responsive-design

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

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

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

2 个答案:

答案 0 :(得分:1)

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

  

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

Here are the docs from Mozilla.

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

答案 1 :(得分:1)

令人敬畏,轻松,渐进的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