0

我想创建一个填充整个背景的网页背景图像，而不会扭曲图像并改变它的比例。

你可以在 LaunchRock 的页面和他们的主页上看到一个很好的实现，例如.

我在 StackOverflow 上看到了这个问题，但是如果你玩弄它会产生什么，你会发现背景图像是 100% 的高度和 100% 的宽度，这意味着照片的原始比例没有保持并且图像被拉伸。

请注意，在 LaunchRock 示例中，如果您调整浏览器窗口的大小，图像会按比例增长并始终填满整个窗口（无论它们使用什么大小的窗口或背景图像）。

如果浏览器窗口不够宽，它会裁剪背景图像的两侧（保持图像居中并裁剪左右两侧），如果窗口不够高，它会裁剪背景图像的底部。

无论浏览器窗口大小，都保持图像的高宽比并填充整个背景。

我猜这不能用纯 CSS 完成，可能需要一些 JavaScript。有任何想法吗？

谢谢

4

4 回答 4

2

它仅使用 CSS 完成，如下所示：

body {    
    background: black url(/images/back.jpg) no-repeat top center fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

使之成为可能的事情：

  • CSS 属性background-size设置为cover及其供应商前缀版本
  • 使用background-image两侧逐渐变黑的a
  • 位置设置为top center
  • 使用fixed属性
于 2012-06-26T10:43:20.973 回答
1

如果你不介意使用 jQuery，你可以试试http://srobbin.com/jquery-plugins/backstretch/ 。

于 2012-06-26T10:44:38.297 回答
1

示例：http: //jsfiddle.net/rPhLa/

你必须设置：

 html,body{ height:100%; width:100%; }

所以他们占据了整个屏幕，然后作为背景：

body { background-image: url(http://launchrock.com/images/back.jpg); background-repeat: no-repeat; background-position:center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }​
于 2012-06-26T10:45:55.503 回答
1

您作为示例使用的 LaunchRock 页面使用CCS3属性：background-size。这是发挥规模“魔力”的属性。

更多关于background-size：http ://www.css3.info/preview/background-size/

  • 不要忘记查看浏览器对此属性的支持。

这很可能可以使用 javascript 甚至仅使用 CSS2 来完成。抱歉，我现在手头没有例子。

于 2012-06-26T11:10:04.613 回答