2020/12/29

CSSで色を透明にする方法【現役エンジニアが解説】

今回は、CSSで色を透明にする方法について、2つのパターンに分け、簡単に解説していきます。

trasparentで色を透過

色の値をtransparentにすると透過させることができます。

colorプロパティやbackground-colorプロパティで使うことができます。

.hoge{
    background-color:trasparent;
}

上記のコードでは、hogeというクラスを持つ要素の背景色を透明にしています。

色の値を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%にし、要素全体の不透明度を設定しています。