CSSで色を透明にする方法【現役エンジニアが解説】
今回は、CSSで色を透明にする方法について、2つのパターンに分け、簡単に解説していきます。
trasparentで色を透過
色の値をtransparentにすると透過させることができます。
colorプロパティやbackground-colorプロパティで使うことができます。
.hoge{ background-color:trasparent; }
上記のコードでは、hogeというクラスを持つ要素の背景色を透明にしています。
rgba(0,0,0,0)で色を透過
色の値をrgba(0,0,0,0)で指定する場合でも透過設定が可能です。
rgba(0,0,0,0)形式では、4番目の数字で0~1の間の不透明度を指定できます。
.hoge{ background-color:rgba(255,0,0,0.5); }
上記のコードでは、hogeというクラスを持つ要素の背景色を不透明度50%の赤色にしています。
要素そのものを透過させる方法
CSSでは、色だけでなく要素そのものを透過させることもできます。
opacityプロパティを使うことで、要素自体の不透明度を設定することが可能です。
.hoge{ opacity:0.5; }
上記のコードでは、hogeというクラスを持つ要素の不透明度を50%にし、要素全体の不透明度を設定しています。