0

画面全体を埋めるために使用している CSS 背景画像があります。私はcoverいくつかの IE フォールバックと一緒に使用しています。背景画像が読み込まれると、ページのすべてのコンテンツが覆われますが、その理由がわかりません。コードは次のとおりです。

CSS:

#background-wrap{ 
background: url(/2012/images/august/moon-background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* Cover for IE 7/8 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/2012/images/august/moon-background.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/2012/images/august/moon-background.jpg', sizingMethod='scale');
/* End Cover for IE 7/8 */
background-size: cover;
background-color: transparent !important;
position:fixed;
top: 0;
left: 0;
width: 100%;
height:100%;
max-width:3000px;
max-height:1500px;
z-index:1;  
} 

.img-center{ 
    text-align: center;
    z-index:9999;
}

HTML:

<div class="img-center">
  <img src="/2012/images/august/neil-armstrong.png" class="feature-image" />
</div>
<!-- More Content --> 
<div id="background-wrap"></div>

なぜこれが機能しないのかわかりません。

注: IE 8 以下との互換性の理由から、body または html タグに background-wrap CSS を割り当てません。理由は次のとおりです。

上記の IE フィルターを使用しようとしていて、スクロールバーやリンク切れなどの問題が発生している場合は、 or要素でそれらを使用しないようにしてください。ただし、代わりに、幅と高さが 100% の固定位置 div です。htmlbody

4

1 に答える 1

2

バックグラウンド ラップをコンテンツの周りにラップする必要があります。

<div id="background-wrap">
<div class="img-center">
  <img src="/2012/images/august/neil-armstrong.png" class="feature-image" />
</div>
<!-- More Content --> 
</div>
于 2012-08-27T02:16:42.787 に答える