CSS body の背景画像を設定した。その上にある要素の背景を少し透明にするには？

/ CSS / By
ショコラ
ショコラ

CSS body の背景画像を設定した。その上にある要素の背景を少し透明にするには？

background-color:rgba(255,255,255,｛alpha値｝) でキメマス。
alpha値を「０」にすると透明になる。「１」にすると透けない。

もっさん先輩
もっさん先輩
background-color:rgba(255,255,255,0.9)

例

body に背景画像を付ける。
ブラーで画像を少しぼかす。
カバーで画像を引き延ばして、fixed でスクロールしても動かないように固定する。

body {
  background-image: url({{ url('bg.jpg') }});
  backdrop-filter: blur(2px);
  background-size: cover;
  background-attachment: fixed;
}

その背景の上に segment を配置した。
segment の背景の白色を少しだけ透けるようにしたい気分になった。

<div class="ui raised segment"
 style="background-color:rgba(255,255,255,0.9)">
</div>

以上

Scroll to Top