CSS背景の不透明度

以下のようなコードを使用しています。

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

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

Peter Mortensen
編集された質問 23日 3月 2019 в 12:24
プログラミング
html css opacity
2日 5月 2012 в 11:05
15 ビュー
ソリューション

子供は不透明度を継承します。そうでないと変だし、不便ですよね。

背景画像に半透明のPNGファイルを使用したり、背景色にRGBa（aはアルファ）を使用したりすることができます。

例：50％退色した黒の背景。

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>
Peter Mortensen
編集した答え 23日 3月 2019 в 12:25
解説 (11)

私は次のようにします。

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSSです。

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

これで動くはずです。これは、色ではなく半透明の画像を要求されていることを前提としています（これにはrgbaを使うべきです）。また、Photoshopで事前に画像の不透明度を変更することはできないと仮定しています。

Peter Mortensen
編集した答え 23日 3月 2019 в 12:41
解説 (2)

これは、内側のdivの不透明度が、入れ子になっているdiv（40％の不透明度）の100％であるためです。

これを回避するためには、いくつかの方法があります。

以下のように、2つの独立したdivを作ることができます。

<div id="background"></div>
<div id="bContent"></div>

背景に任意の CSS の不透明度やその他のプロパティを設定し、z-index プロパティ (z-index) を使用して bContent div のスタイルと位置を設定します。これにより、背景の不透明度を変更することなく、divを背景divの上に配置することができます。

もう一つの方法は、RGBaです。これにより、divを入れ子にしても、div固有の不透明度を実現することができます。

最後の方法は、お好みの画像エディタで半透明の.png画像を作成し、background-imageプロパティにその画像のURLを設定するだけです。これで、CSSをいじる必要がなくなり、入れ子になったdiv構造の機能と構成が失われません。

Peter Mortensen
編集した答え 23日 3月 2019 в 12:30
解説 (0)