【css】背景や文字・要素を透過する２つの方法！！

今回は背景色や文字・要素を半透明や透明にする方法についての記事になります。

"色"を透過させて、背景や文字を透明にする。

まずは色を透明にするという手法です。

色を透明にしない。

色を半透明にする。

色を透明にする。

<p style="color:rgba(255,0,0,1);">色を透明にしない。</p>
<p style="color:rgba(255,0,0,0.5);">色を半透明にする。</p>
<p style="color:rgba(255,0,0,0);">色を透明にする。</p>

この方法は、rgb(red,green,blue)を0～255の間で指定したうえでalpha(透過度)を0.0～1.0の少数で指定します。
また「transparent」を指定する方法もあり、どちらも背景色に流用できます。

<div style="background-color:rgba(255,0,0,1);">
<p>背景色を透明にしない。</p>
</div>
<div style="background-color:rgba(255,0,0,0.5);">
<p>背景色を半透明にする。</p>
</div>
<div style="background-color:transparent;">
<p>背景色を透明にする。(transparentを指定)</p>
</div>

要素を透明にする。

画像や「div」で囲ったブロックや文字などを透過する方法です。ただしこの手法を用いると、子要素にも適用されるので「div」などの親要素に適用するには注意が必要です。

<div style="opacity: 0.5; background-color:#cccccc;">
<p style="color:red;">親・子要素全てを半透明にする。</p>
</div>