0

使用这个例子： http ://www.meridianapps.com/

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

我想复制这个。有人可以向我指出一个插件或代码，我可以用它来将这样的东西插入我的网站吗？

4

2 回答 2

1

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

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

这是来自 Mozilla 的文档。

根据Can I use... ，此属性应在除 IE8 之外的任何浏览器中工作。

于 2013-05-16T17:17:59.523 回答
1

很棒的，简单的，渐进的 CSS3 方式 我们可以完全通过 CSS 来做到这一点，这要归功于 CSS3 中的 background-size 属性。我们将使用 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-16T17:18:17.513 回答