多背景圖片不是在IE8和IE7

工作下面是我所實現的多重背景圖像，主體簡單的代碼，但鑑於，適用於所有其他瀏覽器的代碼不能在IE 7中運行和8。我已經使用PIE.htc這是相對於HTML文件，但仍然沒有成功。請幫我解決這個例子。多背景圖片不是在IE8和IE7

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body style="background: url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x; behavior: url(http://localhost/mutliple_bg/PIE.htc); 
-pie-background:url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x; position:relative; zoom:1; z-index:1;"> 
</body> 
</html>

來源

2012-08-13 Joel

只有IE9及以上版本支持多種背景。

來源

2012-08-13 15:10:56 MervinJ

不好意思閱讀了你的問題，只是注意到你的使用餡餅。 PIE不支持BODY元素上的多個背景;

解決方案：爲身體創建div容器。

來源

2012-08-13 15:52:08 MervinJ

通過使用容器和body標籤可以輕鬆實現多個背景，但我的目標是使用PIE.htc，它可以幫助IE7,8中的多個背景圖像。這是否意味着PIE.htc不支持IE7,8的多個背景屬性。請澄清我的疑問。 – Joel 2012-08-25 12:15:22

使用DIV位置relative and absolute

我認爲這是最簡單的方式來解決跨瀏覽器的問題，希望這有助於...

點擊here的工作小提琴

HTML

<div class="parent"> 
    <div class="colorLeft"></div> 
    <div class="contentArea"></div> 
</div>

CSS

.parent { 
    float:left; 
    width:100%; 
    height:200px; 
    background-color:#555; 
    position:relative; 
    z-index:1; 
} 
.colorLeft { 
    width:50%; 
    float:left; 
    height:200px; 
    background-color:blue; 
    position:absolute; 
    z-index:-1;  
} 
.contentArea { 
    width:400px; 
    background-color:#fff; 
    height:180px; 
    margin:10px auto; 
}

來源

2013-02-21 02:57:15 jhunlio

多背景圖片不是在IE8和IE7

回答

相關問題