我想创建一个填充整个背景的网页背景图像,而不会扭曲图像并改变它的比例。
您可以在LaunchRock的页面及其主页for example上看到这方面的一个很好的实现。
我看到this question on StackOverflow但是如果你玩弄产生的东西,你会看到背景图像是100%高度和100%宽度,这意味着照片的原始比例不能保持和图像被拉长了。
请注意,在LaunchRock示例中,如果您调整浏览器窗口的大小,图像会按比例增长并始终填充整个窗口(无论使用何种大小的窗口或背景图像)。
如果浏览器窗口不够宽,则会裁剪背景图像的两侧(保持图像居中并裁剪左右两侧),如果窗口不够高,则裁剪背景图像的底部。
无论浏览器窗口的大小是多少,图像高度/宽度比都会保持不变,整个背景都会被填充。
我猜这不能用纯CSS完成,可能需要一些JavaScript。 有什么想法吗?
由于
答案 0 :(得分:2)
仅使用CSS完成,如下所示:
body {
background: black url(/images/back.jpg) no-repeat top center fixed;
-webkit-background-size: cover;
background-size: cover;
}
使事情成为可能的事情:
background-size
设置为cover
及其供应商前缀版本background-image
在两侧淡化为黑色top center
fixed
属性答案 1 :(得分:1)
如果您不介意使用jQuery,可以尝试http://srobbin.com/jquery-plugins/backstretch/。
答案 2 :(得分:1)
你必须设置:
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; }
答案 3 :(得分:1)
您使用的LaunchRock页面使用 CCS3 属性:background-size
。
这是属于规模“魔力”的属性。
有关background-size
的更多信息:http://www.css3.info/preview/background-size/
很可能这可以通过javascript完成,甚至只使用CSS2。对不起,我现在手里还没有一个例子。