☰

CSS 背景の不透明度 [重複] 質問する

tag-icon • tag-icon html css opacity
CSS 背景の不透明度 [重複] 質問する

私は次のようなコードを使用しています:

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

これにより、背景の不透明度が 0.4、テキストの不透明度が 100% になると思っていました。しかし、両方の不透明度は 0.4 でした。

ベストアンサー1

子供たちは不透明性を継承します。継承しないとしたら奇妙で不便です。

背景画像には半透明の PNG ファイルを使用するか、背景色には RGBa (a はアルファ) カラーを使用できます。

例: 50% フェードした黒の背景:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>

おすすめ記事