CSS 在 IE8 中拉伸背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9385566/
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
Stretch a background image in IE8
提问by Mosaic
I'm trying to stretch a background image to 100% width and height of the parent div. background-size is not supported in IE8 of-course. I tried the following code but it's not working.
我正在尝试将背景图像拉伸到父 div 的 100% 宽度和高度。IE8当然不支持背景大小。我尝试了以下代码，但它不起作用。
.box:before {
background: url(images/body_background2.png) no-repeat;
display: block;
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
content: '';
}
回答by Zeta
Use a <img>with position:fixed;top:0;left:0;width:100%;height:100%;and negative z-index. There's unfortunately no way to implement this behavior in IE 8 using only CSS.
使用<img>withposition:fixed;top:0;left:0;width:100%;height:100%;和 negative z-index。遗憾的是，无法仅使用 CSS 在 IE 8 中实现此行为。
See the following article for further information: How Do you Stretch a Background Image in a Web Page.
有关详细信息，请参阅以下文章：如何在网页中拉伸背景图像。
If you wish to use an image as a background for a given <div>try the following approach:
如果您希望将图像用作给定的背景，请<div>尝试以下方法：
<div class="fullbackground">
<img class="fullbackground" src="yourImageSrc" />
</div>
.fullbackground{
position:relative;
}
img.fullbackground{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%; /* alternative: right:0; */
height:100%; /* alternative: bottom:0; */
}
回答by dav
I use this article often to do my full screen backgrounds :)
我经常用这篇文章来做我的全屏背景:)
回答by anddoutoi
Using the AlphaImageLoaderfilter and setting the sizingMethodto scaleseems to do the trick according to Perfect Full Page Background Image.
根据Perfect Full Page Background Image ，使用AlphaImageLoader过滤器并将 设置sizingMethod为scale似乎可以解决问题。
回答by T Zengerink
HTML:
HTML：
<img class="fullscreen" src="fullscreen.jpg" />
CSS:
CSS：
img.fullscreen {
border: 0;
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1001;
}
回答by anD666
Have a look at https://github.com/louisremi/background-size-polyfill. This is a nice plugin another member of my team came across for the same issue.
看看https://github.com/louisremi/background-size-polyfill。这是一个很好的插件，我团队的另一个成员遇到了同样的问题。
Once you have the script included into your solution, add the following line into the relevant CSS class along with any other sizing/positioning attributes you may wish to add.
将脚本包含到您的解决方案中后，将以下行添加到相关的 CSS 类以及您可能希望添加的任何其他大小调整/定位属性。
-ms-behavior: url(/scripts/backgroundsize.min.htc);
-ms-behavior: url(/scripts/backgroundsize.min.htc);
We have this implemented for full width images and widget backgrounds and it works a treat.
我们为全宽图像和小部件背景实现了这一点，它很有效。
回答by ecmanaut
This (demo) does the trick (digestable version of css-only technique #2 from http://css-tricks.com/perfect-full-page-background-image/):
这（演示）可以解决问题（来自http://css-tricks.com/perfect-full-page-background-image/的 css-only 技术 #2 的可消化版本）：
<div class="background-size_cover">
<img src="images/body_background2.png">
</div>
and
和
.background-size_cover {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
position: relative;
}
.background-size_cover img {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
position: absolute;
}
You'll want to make sure that the parent div is overflow: hidden;besides having whatever dimensions you want the image to get stretched to fit in.
您需要确保父 divoverflow: hidden;具有您希望图像拉伸以适应的任何尺寸。
回答by Ali Doruk Baykal
I combined AlfaImageLoaderfilter with css3 background-sizeand worked on all browsers. Here's what i did.
我将AlfaImageLoader过滤器与 css3结合使用background-size，并在所有浏览器上工作。这就是我所做的。
background : url('../images/background.jpg') no-repeat ;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/background.jpg',sizingMethod='scale');
By the way, you need to put your background image to your wrapper div in this method.
顺便说一句，您需要在此方法中将背景图像放入包装器 div 中。
