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

HTML&CSS

スポンサーリンク

背景色を透明にする

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

background-color: transparent;
または
background-color:rgba(0,0,0,0);

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;

半透明にするとこうなる

要素を透過させる
子要素のpタグも透過している

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

Posted by Agopeanuts