即使放大/缩小，CSS 主体背景图像也固定为全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3594512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS body background image fixed to full screen even when zooming in/out
提问by Michael Mao
I am trying to achieve something like this with CSS:
我正在尝试使用 CSS 实现这样的目标：
I'd like to keep the body background image fixed on fullscreen, this is sort of done by the following code:
我想将身体背景图像固定在全屏上，这是通过以下代码完成的：
body
{
background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}
Now I can verify the window is indeed filled up with that image, at least this works on my Firefox 3.6
现在我可以验证窗口确实充满了该图像，至少这适用于我的 Firefox 3.6
However, it screwed up when I tried to zoom in/out (ctrl+-/+), the image just is stretched/shrinked as the page zooms.
但是，当我尝试放大/缩小（ctrl+-/+）时它搞砸了，图像只是随着页面缩放而拉伸/收缩。
Is there a better way of doing this purely with CSS? I didn't find a good property for the background-image.
有没有更好的方法可以纯粹使用 CSS 来做到这一点？我没有为背景图像找到好的属性。
Or should I start thinking about jQuery to manipulate the width and height on the fly? They were both set to 100% so I reckon that should work "as always" :(
或者我应该开始考虑使用 jQuery 来动态操纵宽度和高度？它们都设置为 100%，所以我认为应该“一如既往”工作:(
Thanks for any suggestion in advance!
感谢您提前提供任何建议！
采纳答案by Pat
I've used these techniquesbefore and they both work well. If you read the pros/cons of each you can decide which is right for your site.
我以前使用过这些技术，它们都运行良好。如果您阅读了每个的优缺点，您可以决定哪个适合您的网站。
Alternatively you could use the full size background image jQuery pluginif you want to get away from the bugs in the above.
或者，如果您想摆脱上述错误，您可以使用全尺寸背景图像 jQuery 插件。
回答by Ranjith Siji
there is another technique
还有另一种技术
use
用
background-size:cover
That is it full set of css is
那就是全套的css
body {
background: url('images/body-bg.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Latest browsers support the default property.
最新的浏览器支持默认属性。
回答by WorkingMatt
You can do quite a lot with plain css...the css property background-sizecan be set to a number of things as well as just coveras Ranjith pointed out.
你可以用普通的 css 做很多事情……css 属性background-size可以设置为很多东西，cover就像 Ranjith 指出的那样。
The background-size: coversetting scales the image to cover the entire screen but may mean that some of the image is off screen if the aspect ratio of the screen and image are different.
该background-size: cover设置缩放图像以覆盖整个屏幕，但如果屏幕和图像的纵横比不同，则可能意味着某些图像不在屏幕上。
A good alternative is background-size: containwhich resizes the background image to fit the smaller of width and height, ensuring that the whole image is visible but may lead to letterboxing if the aspect ratios are different.
一个很好的选择是background-size: contain调整背景图像的大小以适应宽度和高度中的较小者，确保整个图像可见，但如果纵横比不同，可能会导致信箱。
For example:
例如：
body {
background: url(/images/bkgd.png) no-repeat rgb(30,30,30) fixed center center;
background-size: contain;
}
The other options that I find less useful are:
background-size: length <widthpx> <heightpx>which sets the absolute size of the background image.
background-size: percentage <width> <height>background image is a percentage of the window size.
(see w3schools.com's page)
我发现不太有用的其他选项是：
background-size: length <widthpx> <heightpx>它设置背景图像的绝对大小。
background-size: percentage <width> <height>背景图像是窗口大小的百分比。（参见w3schools.com 的页面）
回答by dafNou
Add this in your css file:
在你的 css 文件中添加：
.custom_class
{
background-image: url(../img/beach.jpg);
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and then, in your .html (or .php) file call this class like that:
然后，在您的 .html（或 .php）文件中，像这样调用这个类：
<div class="custom_class">
...
</div>
回答by subindas pm
Use Directly like this
像这样直接使用
.bg-div{
background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}
or call CSS separately like
或单独调用 CSS，如
.bg-div{
background-image: url(../img/beach.jpg);
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
回答by rajapandian
Here is the simple code for full page background image when zooming
you just apply the width:100%in style/css thats it
这是缩放时整页背景图像的简单代码，您只需应用width:100%in style/css 就可以了
position:absolute; width:100%;
position:absolute; width:100%;
