Html 比例背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11386883/
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
scale background image
提问by stdcerr
I would like to scale up and down a background image in my page. I've tried multiple things but nothing quite seems to work the way I want. :( The url of my page is http://quaaoutlodge.com/drupal-7.14/and for each link, there's a different background image. I know the size and quality of the images will need to be optimized but I first want to figure out the techincal part of it. If someone please coudl assist in getting this going?
我想放大和缩小页面中的背景图像。我尝试了多种方法，但似乎没有什么能像我想要的那样工作。:( 我的页面的 url 是http://quaaoutlodge.com/drupal-7.14/并且每个链接都有不同的背景图片。我知道图片的大小和质量需要优化，但我首先想找出它的技术部分。如果有人可以帮助完成这项工作？
Thank you very much! Ron
非常感谢！罗恩
回答by abhshkdz
Same background image on every page
每个页面上的背景图像相同
If you want a background-image that resizes and fills the entire window space, no matter what the size, then use this CSS,
如果你想要一个调整大小并填充整个窗口空间的背景图像，无论大小，然后使用这个 CSS，
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Different background image on every page
每页不同的背景图片
In case you want a different background image for each page,
如果您想为每个页面使用不同的背景图像，
HTML
HTML
<div id="bg">
<img src="<?=$imgsrc;?>" alt="">
</div>
CSS
CSS
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
Source: CSS-Tricks
来源：CSS 技巧
回答by Anderson Madeira
Antoher way to achieve this can be found at MDN:
可以在 MDN 上找到实现此目的的另一种方法：
.foo {
background-image: url(bg-image.png);
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
IE Fallback:
IE 后备：
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
from https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
来自https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
回答by grayrabbit
Nice to see html background-image being used well. Because some developers depend on trailing edge css to maintain backwards compatibility, many quirks exist for otherwise css3compatible browsers. Like background:coverin older Safari versions (<4.05), which does not work. In this case we can use the older css3vendor fallback as shown
很高兴看到 html background-image 被很好地使用。由于一些开发人员依赖后缘 css 来保持向后兼容性，因此其他css3兼容的浏览器存在许多怪癖。就像background:cover在较旧的 Safari 版本 (<4.05) 中一样，它不起作用。在这种情况下，我们可以使用旧的css3供应商回退，如图所示
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-backgound-size:100% 100%; /* early css3 implementation */
-webkit-background-size:cover;
}
And, if by chance you want different background images for different pages in pure css, lets go with
而且，如果您想在纯 css 中为不同的页面使用不同的背景图像，请使用
html#bg1 {backrgound-image:url(images/bg1.jpg);}
html#bg2 {background-image:url(images/bg2.jpg);}
But, if you cannot give your <html>tag an idor classyou may have to resort to some javascript. You can then use a different background image for each page on the <html>element, which is just what is needed. This seems to work fine on the htmltag. Some browsers ignore the cssfor background-imagewhen used on html. The bodytag is less temperamental. This may be a better fix than the php-based method. For example:
但是，如果你不能给你的<html>标签 anid或者class你可能不得不求助于一些javascript. 然后，您可以为<html>元素上的每个页面使用不同的背景图像，这正是所需要的。这似乎在html标签上工作正常。一些浏览器在使用时忽略cssfor 。该标签是少气质。这可能比基于 php 的方法更好。例如：background-imagehtmlbody
<script>
document.getElementsByTagName('html')[0].style.backgroundImage='url(images/bg3.jpg)';
</script>
The html css for background-size would continue to apply and would cover correctly across various browser versions. Note however, that older Safari will throw an error on javascriptwhich uses an empty url, say to clear the background image, e.g.
background-size 的 html css 将继续适用，并将正确覆盖各种浏览器版本。但是请注意，旧版 Safari 会在javascript使用空 url 的情况下引发错误，例如清除背景图像，例如
<script> /*Causes Error Safari 4*/
document.getElementsByTagName('html')[0].style.backgroundImage='url()';
</script>
The error will normally halt javascriptexecution with no clue as to the cause. Instead we need to use style.backgroundImage='none';
该错误通常会javascript在不知道原因的情况下停止执行。相反，我们需要使用style.backgroundImage='none';
回答by Phil Hudson
Use a media query in your CSS to specify a background image for different screen sizes:
在 CSS 中使用媒体查询为不同的屏幕尺寸指定背景图像：
@media all and (max-width: 699px) and (min-width: 520px) {
background-image:url('rightsizebackground.jpg');
}
