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-sizehttp ://www.css3.info/preview/background-size/

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

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

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