ホームページ > 記事 > ウェブフロントエンド > 根本的なすりガラス効果を実現するための純粋な CSS (コード例)
根本的なすりガラス効果を実現するための純粋な CSS (コード例)
- 不言転載
- 2018-11-27 16:27:023577ブラウズ
この記事の内容は、純粋な CSS での曇りガラス効果の実現に関するものです。必要な方は参考にしていただければ幸いです。
曇りガラスの背景は非常に一般的な Web ページのスタイルであり、実装は難しくありません。しかし、インターネットで検索したところ、多くの実装方法が比較的不規則で、問題を複雑にしていることがわかりました。さまざまな z-index 属性と位置の配置として)
W3Schools
HTML パート# から改良された、非常に簡単なコードと優れた実装効果を備えた実装ソリューションが提供されるようになりました。 ##
<!DOCTYPE html> <html dir="ltr"> <head> <meta charset="utf-8"> <title>FrostedGlass</title> <link rel="stylesheet" href="frostedGlass.css"> </head> <body> <div> <div> <p>this is FrostedGlass</p> </div> </div> </body> </html>.mainHolder はメインフレームです。
.textHolder はすりガラス領域です。
.p はすりガラス上に浮かぶテキストコンテンツです。
CSS パーツです。
* {
box-sizing: border-box;
}
.mainHolder {
width: 600px;
height: 600px;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.textHolder {
width: 100%;
height: 200px;
position: absolute;
right: 0;
bottom: 0;
background: inherit;
overflow: hidden;
}
.textHolder::before {
content: '';
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
background-attachment: fixed;
filter: blur(4px);
}
.textHolder::after {
content: "";
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.25);
}
p {
z-index: 1;
color: white;
position: relative;
margin: 0;
}すりガラス効果の中核的な問題を解決するには: ぼかし効果はフォントに影響を与えることができず、疑似要素 ::after が使用されます::before pタグ内のposition属性を使用します。相対に設定すると、p はブロックされた状態から「解除」されます。
さらに、ブラウザ カーネルが異なると、フィルタの記述方法も若干異なります。
以上が根本的なすりガラス効果を実現するための純粋な CSS (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。