在IE中伸展背景图片

我有背景图片。我正在扩展它，以便它适合整个页面。但它在IE以外的浏览器中工作。但如果我使用background-size，它在IE9中工作。但我希望它能在IE8中工作。这个怎么做？提前致谢。在IE中伸展背景图片

在其他浏览器和在IE9： enter image description here

在IE8： enter image description here

您可以在页面底部的差异。这里是我的代码：

body, html{ 
    height:100%; 
    padding:0; 
    margin:0; 
} 

body.BodyBackground { 

    margin: 0px; 
    background: url(../images/common/header/Background_color.png); 
    background-repeat:repeat-x; 
    background-attachment:fixed; 
    background-position:top center; 
    height: 100%; 
    width: 100%; 
    border: 0; 
    background-size:contain; 
    display:inline-block; 
    background-color: transparent; 


} 

div.content{  
    height:100%; 
    width:97%; 
    background-color: rgb(255, 255, 255); 
    margin: 0px 25px 25px 25px; 
    height:470px; 
    background-position:center; 
    background-repeat:no-repeat; 
    background-attachment:fixed; 

}

来源

2013-05-10 mukund

'background：url（../ images/common/header/Background_color.png）#yourColorFromBottomOfImage;' – Morpheus 2013-05-10 09:19:37

我没有得到你。你能不能更清楚些？ – mukund 2013-05-10 09:22:12

只需在photoshop（或任何其他软件）中打开背景图像并抓住图像的底部颜色即可。然后用你抓的颜色替换我的'＃yourColorFromBottomOfImage'。 – Morpheus 2013-05-10 09:23:55

IE8不支持background-size财产。

您有以下选择：

使用的背景图形不需要拉伸。
有不同的背景图片（或者根本没有背景图片）
[编辑]请参阅有关如何与没有浏览器的黑客来实现这个纯CSS更多信息my blog post on the subject提供IE8。
忽略问题并让IE8用户看到一个稍微破碎的网站。
使用像CSS3Pie这样的填充脚本将background-size功能添加到IE8。

如果你真的想用background-size，你真的需要支持IE8，那么最后的这些选项可能是你最好的一个。

来源

2013-05-10 09:57:01 Spudley

如何使用css3pie – mukund 2013-05-10 10:00:20

从http://css3pie.com/下载并按照网站上的说明操作。 – Spudley 2013-05-10 10:01:17

注意：您需要使用css3pie v2作为背景大小的功能。 – Spudley 2013-05-10 10:01:43

CSS3将实现一个background-size属性。但它不支持在IE < 9.

如果你想缩放一个背景渐变，你可以使用img元素，因为它是缩放。现在不使用背景来显示PNG，而是使用img元素，并将宽度和高度设置为100％。

我认为这是你想要什么：

* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    height: 100%; 
} 

#page { 
    position: relative; 
    min-height: 100%; 
} 

#page img { 
    background-color: transparent; 
    height: 100%; 
    left: 0px; 
    position: absolute; 
    top: 0px; 
    width: 100%; 
}

的标记：

<body> 
    <div id="page"> 
     <img src="../images/common/header/Background_color.png" alt="" /> 
    </div> 
</body>

来源

2013-05-10 11:06:21 Salomonder

如果我这样做，我会得到两个部分。一个只显示背景，另一个只显示内容。 – mukund 2013-06-03 08:18:40

虽然像其他的答案状态background-size不支持是事实。还有其他方法可以实现。

您可以使用以下方式在旧IE中实现拉伸背景。对于sizingMethod

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

其他尺寸选项：

作物剪辑图像以适合该对象的尺寸。
图片默认。放大或缩小对象的边框以适合图像的尺寸。
比例尺拉伸或缩小图像以填充对象的边界。

它，你不要在html或body标签使用，这是非常重要的。相反，创建一个具有100％宽度和高度的fixed位置div。

来源

2013-06-03 09:55:50 Blowsie

在IE中伸展背景图片

回答

相关问题