【CSS入門】背景色の不透明度を調整する

所有時間1分

今回はCSSでHTMLタグの背景色の不透明度を調整する方法を紹介します。

目次

テキストと背景色の不透明度を同時に調整する

See the Pen background-color by Tsunagu (@Tsunagu) on CodePen.

opacityプロパティを使えば、指定したタグの不透明度を調整できます。値が「1」の場合不透明度100%、「0」の場合不透明度0%になります。ただし、opacityで選択した要素全ての不透明度が同時に調整されてしまいます。

背景色だけ不透明度をする

See the Pen rgba by Tsunagu (@Tsunagu) on CodePen.

背景色だけ不透明度を調整したい場合はbackgroung-colorプロパティの値にrgbaを使用します。rgbaの4つ目の値でopacityプロパティのように不透明度を調整します。

以上です。

URLをコピーする
URLをコピーしました!
目次
閉じる