1

ある部門を、それぞれ異なる背景を持つ別の部門の上に積み重ねたい。もちろん、背景は透明になります（.png）。これは、画像上のパターンの効果を再現し、1366 x 768 の画像全体を読み込まないようにするためです。

私のhtmlはこのようなものです

<body>
  <div id="firstLayer">
    <div id="secondLayer">
         <div id="mainContent">
          main page content 
         </div>
    </div>
  </div>
</body>

には放射状のグラデーションがありbody、#firstLayerにはメインのロゴが含まれており、#secondLayerは透明なパターンで構成されている必要があります。

CSSでの私の最初の試みは、このようなものでした

#secondLayer{
    background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
}

しかし、パターンはまったく表示されません。#secondLayerこれを の#firstLayerすぐ下に配置するにはどうすればよい#mainContentですか?

4

3 に答える 3

1

#secondLayerこのデモのように幅と高さを指定する必要があります

#secondLayer{
    background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
    width: 100%;
    height: 100%;
}
于 2012-11-01T12:05:00.873 に答える
1

あなたはこれをやろうとしていますか -

#firstLayer{ background: red; height: 500px; }
#secondLayer{ background: green; opacity: 0.6; filter:alpha(opacity=60); height: 300px; }

デモ

于 2012-11-01T12:05:53.600 に答える
1

DIV コンテンツがない場合は、幅と高さが必ず必要です。それでも問題が解決しない場合:

画像パスを確認してください。IMG タグで同じ画像パスを使用して同じ画像をロードできますか?

スタイルシートがインラインであるか、別のファイルとしてロードされているか - これは、画像ファイルへの相対パスに影響します。

ウェブサーバーは大文字と小文字を区別しますか? パスの大文字と小文字は画像と一致していますか?

お役に立てれば。

于 2012-11-01T12:08:36.303 に答える