CSS

2017/05/13

CSSのopacityを使用すると不透明度を設定した要素の内容は親要素と同じ不透明度になりますがrgbaを使用すると不透明度は継承されないので内容はそのまま表示されます。

以上です。

ということですが実際に試してみます。

HTML

<div class="opacity_box">
  <p><img alt="" src="http://netkansai.com/contents/images/20140322_140140168_iOS.jpg"></p>
  <div class="color_box">
    <p class="chirol">愛犬 チロル</p>
  </div>
</div>

 opacity_boxクラスを持つDIV要素の中に画像と文字があります。文字をそのまま画像に重ねても読みづらいので文字はcolor_boxクラスと持つDIV要素の中に文字を入れています。

CSS

.opacity_box{
  position:relative;
  width:80%;
}
.color_box{
  opacity:0.65;        /* 不透明度の設定65%の不透明度 */
  position:absolute;
  width:80%;height:40%;
  background-color:#ff6600;
  top:30%;
  margin-left:10%;
}
.chirol{
  font-size:48px;
  color:#fff;
  text-align:center;
}

文字の親のcolor_boxクラスに背景色を設定しています。オレンジっぽい色です。このままではこの後ろは写真が見えなくなるので少し後ろの写真が見えるようにCSSのopacityプロパティーで透けるようにしてあります。ただこれをするとcolor_boxクラスの子孫要素はすべて同じ不透明度になってしまいますので文字に設定した文字色の白まで透けてしまいます。colorを#fffにしていますがきれいな白ではないですね。背景のオレンジと犬の写真の色が混じってしまっています。

こういう時は背景のオレンジのDIV要素（color_boxクラス）にopacityではなくbackground-clor;rgba()を使えばうまくいきます。

うまく文字色が真っ白になりました。

CSS

.color_box{
  /* 不透明度の設定65%の不透明度 opacity:0.65; は消す */
  position:absolute;
  width:80%;height:40%;
  background-color:rgba(255,102,0,0.65); /* #16進数ではなくrgba()に変更 */
  top:30%;
  margin-left:10%;
}

rgba()は10進数にしないといけません。並びはrgbなのでred、blue、greenそしてalpha（不透明度になります。）aは0から1までの数値で0で真っ透明（見えません）、1で全然透明じゃないということです。