CSSはすりガラススタイルを実装します
すりガラスの背景を実現するには、CSS3 の::before擬似要素とbackdrop-filterプロパティをopacityプロパティやblur()関数と組み合わせて使用します。
具体的な実装手順は次のとおりです。
- 要素などの背景を持つ要素を作成します
div。
div {
background-image: url("your-image-url");
}
::before疑似要素を使用して、半透明の背景レイヤーを要素に追加します。
div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
この例では、::before疑似要素の内容は空に設定され、位置は絶対値、幅と高さは 100%、半透明の白の背景色が設定されています。
backdrop-filterこの属性を使用して::before、疑似要素の背景をぼかします。
div::before {
/* ... */
backdrop-filter: blur(10px);
}
この例では、blur()関数を使用してぼかしレベルを 10 ピクセルに設定します。必要に応じてこの値を調整して、ぼやけを制御できます。
- 曇りガラスの効果をより顕著にするために、
opacity属性を使用して::before擬似要素の不透明度を下げることができます。
div::before {
/* ... */
opacity: 0.8;
}
この例では、::before擬似要素の不透明度を 0.8 に下げて、曇りガラスの効果を高めます。
完全な CSS コードは次のとおりです。
div {
background-image: url("your-image-url");
position: relative;
}
div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
opacity: 0.8;
}
このように、CSS を使用して、すりガラスの背景効果をすばやく簡単に実現できます。backdrop-filter属性はすべてのブラウザでサポートされているわけではなく、互換性テストと互換性処理が必要であることに注意してください。