如何保持页面背景图像缩放固定？ CSS

我知道如何设置页面背景等;如何保持页面背景图像缩放固定？ CSS

body{ 
    background-color: blue; 
    background-image: url(imagename.ext); 
    background-repeat: no-repeat; 
    background-position: left; 
}

该网页可以放大。使用浏览器，用户可以放大和缩小。但背景图片可能无法放大或缩小。它可以保持原样，默认大小。这可能吗？

来源

2013-08-22 blasteralfred Ψ

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-08-22 12:06:32 Anup

复制/从第一个答案的链接粘贴... – SeinopSys

第一个答案是不完美的形式，你可以看到有，但是它的链接是非常有用和完善，就是这样。只是为了获得帮助，并为需要解决方案的人员提供便利。你有任何其他方式，那么你也可以粘贴 – Anup

您可以使用CSS：

background-size: cover;

教程：http://css-tricks.com/perfect-full-page-background-image/

来源

2013-08-22 12:02:23

小无关的问题，但可能帮助别人。我将使用像这样的http://srobbin.com/jquery-plugins/backstretch/这样的jquery插件。

我一直有速度问题通过CSS为整版静态背景（如阿努普Jangid的答案）。它使页面的滚动非常缓慢和呆板。

来源

2013-08-22 12:26:16 Ankit

我不认为有一种天然的清洁方式来实现你的要求。这种方法应该可以工作，但是在浏览器放大之后，随着尺寸的调整，您可能会获得一些（可能可以接受的）闪烁。

指定background-size：widthpx heightpx，当浏览器缩放时需要检测缩放比例（请参见How to detect page zoom level in all modern browsers?），并相应地设置背景图像的宽度px和高度px。

来源

2013-08-22 13:09:45 guymid

如何保持页面背景图像缩放固定？ CSS

回答

相关问题