LoginSignup
0
0

More than 3 years have passed since last update.

CSSで要素・背景を透過させる方法

Posted at

よく忘れたりごっちゃになるので、備忘録として書いておきます。

要素自体を透過させる

opacityプロパティを指定する。

.header {
  opacity:0.7;
}

要素自体を透過するので、背景色・文字・ボタンなど、headerクラスの要素とその子要素全てが透明になります。
こんな感じ。
スクリーンショット 2021-01-20 12.48.27.png

背景のみ透過させる

backgroundプロパティにrgba()を指定する。

rgba(red,green,blue,alpha)
のalphaが透明度指定なので、以下のような感じで書きます。

.header {
  background-color: rgba(255,255,255,0.8);
}

表示するとこんな感じ。
スクリーンショット 2021-01-20 12.47.33.png

参考

opacity - CSS: カスケーディングスタイルシート | MDN

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0