TIL

Today I Learned. 知ったこと、学んだことを書いていく

背景色を変える background-colorプロパティ - CSS

背景色を変えるにはbackground-colorプロパティを使う。

.main {
    background-color: #fafafa;
}

値にtransparentを設定すると透過色という意味になる。

.main {
    background-color: transparent;
}

色を透過するとき

  • 背景色と文字を透過:opacityプロパティを使う
  • 背景色のみ透過:rgbaで色を指定

背景色と文字を透過

背景色と文字の色を透過するときにはopacityプロパティを使う。

opacityプロパティについてはここに書いた

See the Pen 背景色と文字を透過(opatity) by tamago (@tamago324) on CodePen.

背景色のみ透過

背景色のみ透過するときには色を指定するときにrgbaを使う

rgbaの第4引数に透明度を指定して、透過する

rgbaについてはここに書いてある

See the Pen 背景色のみ透過(rgbaで色指定) by tamago (@tamago324) on CodePen.

参考文献

background-colorを初心者向けに解説!便利な知識も…|Udemy メディア