backdrop-filter を試す

1. このページの目的

CSS の backdrop-filter プロパティを試します。

2. backdrop-filter

backdrop-filter は CSS のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の背後のすべてに適用されるため、効果を見るためには少なくとも一部が透明な要素またはその背景を作成する必要があります。

引用元：backdrop-filter - CSS: カスケーディングスタイルシート | MDN

3. デモ1

backdrop-filter | MDN の例を真似てみる。

backdrop-filter: blur(5px)

HTML

<div id="demo1">
  <div class="container">
    <div class="box">
      <p>backdrop-filter: blur(5px)</p>
    </div>
  </div>
</div>

CSS

#demo1 {
  background-image: url(/css-test/27/photo-forest.w643.min.webp),
    linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 643px;
  height: 406px;
}
#demo1 .container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
#demo1 .container .box {
  color: black;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

4. デモ2

単純に画像全体にぼかしを重ねる。

HTML

<div id="demo2">
  <div class="box"></div>
</div>

CSS

#demo2 {
  background-image: url(/css-test/27/photo-forest.w643.min.webp),
    linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 643px;
  height: 406px;
}
#demo2 .box {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
}

5. Baseline

6. 参考