[CSS] 背景色や文字色を透明・透過させる

2019-03-04HTML&CSS

背景色を透明にする

WordPressでカスタマイズする時に、もともとあるボックスの背景色を透明にして、ボックスの囲いを見えないようにしたい時とかに使える
文字色は不透明で、背景色だけ透過(透明)させたい時もこれ

rgbaを使うと、指定した色を半透明にすることもできる
赤の背景色を透過させるとこうなる

<div style="background-color:rgba(255,0,0,0.25);">
  <p style="color:#000000;">背景色だけ透過させる</p>
</div>

rgba(0,0,0,0)の始めの3つの数値で色を指定することができる
左から、Red、Green、Blue
4番目の数字はアルファ(Alpha)値とよばれる透過度で、0.0～1.0が指定でき、値が大きくなるほど不透明になる

rgbaもtransparentも、colorにも使うことができる

<div style="background-color:skyblue;">
  <p style="color:rgba(255,0,0,1);">文字色が透過していない</p>
  <p style="color:rgba(255,0,0,0.5);">文字色が透過している</p>
</div>

要素を透過させる

画像やdivやspanで作ったブロック、文字などいろんな要素が透明になるが、opacityを指定した要素の子要素にも適用される

opacity: 0;

半透明にするとこうなる

<div style="opacity: 0.5;background-color:red;">
  <p style="color:#000000;">要素を透過させる<br>子要素のpタグも透過している</p>
</div>