1

このウェブページでは、「Sa」と「Flu」の文字を画像の後ろと前の両方に配置しています。

画像が完全に上に表示されていません。画像に透明度がないため、上に表示されている場合、テキストは表示されません。

ただし、画像は明らかに下にもありません。

何が起きてる？

スクリーンショット

4

3 に答える 3

3

Christoferの回答でさらに説明されているようposition: relativeに、headerdivを追加すると、z-index静的に配置された要素（デフォルト、値なし）では機能しないため、問題が解決するようです。position

透明度は、より高いコンテナ（この場合#maincontainer）から伝播します。

于 2012-08-25T12:50:30.543 に答える
2

透明度は、#maincontainer不透明度が0.92に設定されているから取得されます。これにより、子要素で他の何かを指定しない限り、すべてのコンテンツがわずかに透明になります。

#maincontainer {
   margin: 0;
   padding-left: 14px;
   padding-right: 14px;
   padding-top: 10px;
   padding-bottom: 0px;
   text-align: justify;
   opacity: 0.92; /* Your transparency */
}

アップデート：

z-index要素を配置したい要素が配置されていない場合、設定は十分ではありません。z-indexは、配置された要素（position：absolute、position：relative、またはposition：fixed）でのみ機能します。これが、Truthが提案した、ヘッダーを機能するように設定するソリューションである理由position: relative;です。これで、z-indexを使用して画像をテキストの下に配置できます。

于 2012-08-25T12:52:21.357 に答える
2

画像に不透明度を設定しているため、透明度があります。

ここで不透明度を削除します： 

#maincontainer {
    opacity: 0.92; /*< remove this line*/
    text-align: justify;
}

問題を解決します。

于 2012-08-25T12:53:38.480 に答える