根本的なすりガラス効果を実現するための純粋な CSS (コード例)-CSSチュートリアル-php.cn

根本的なすりガラス効果を実現するための純粋な CSS (コード例)

不言

リリース： 2018-11-27 16:27:02

転載

3667 人が閲覧しました

この記事の内容は、純粋な 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 サイトの他の関連記事を参照してください。