0

以下は、本文に複数の背景画像を実装した単純なコードですが、このコードは IE 7 および 8 では機能しませんが、他のすべてのブラウザーでは機能します。HTMLドキュメントに関連するPIE.htcを使用しましたが、まだ成功していません。この例を解決するのを手伝ってください。

<!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>
4

3 に答える 3

1

質問を急いで読んで申し訳ありませんが、パイを使用していることに気づきました。PIE は、BODY 要素の複数の背景をサポートしていません。

解決策: body の div コンテナーを作成します。

于 2012-08-13T15:52:08.727 に答える
0

div 位置を使用するrelative and absolute

これがクロスブラウザの問題を解決する簡単な方法だと思います...

作業フィドルについては、ここをクリックしてください

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-21T02:57:15.613 に答える
0

複数の背景は、IE9 以降でのみサポートされています。

于 2012-08-13T15:10:56.330 に答える