CSS を使用してすりガラス効果を実現する方法について話しましょう (互換性ソリューションの探求)

UsingCSSすりガラス効果を実現するにはどうすればよいですか?以下の記事では、CSSを使ってすりガラスのような特殊効果を実現する方法（互換性のある解決策の模索）を紹介していますので、ご参考になれば幸いです。

少し前に、プロジェクトで「ガウスぼかし」のフィルター効果を使用しました。プロセスを要約すると、これが困っている仲間の道士たちを助けることができれば幸いです~

UI ミス・シスターは、私たちが一般に「すりガラス」効果と呼ぶものの実現をサポートさせてくれと主張しました。 Android システムのカスタマイズされた Webview を実現する必要があると言われました。これが実現できなければ、デザインの魂が失われます。しかし、私があらゆる方法で説明したところ、彼女はそれを望んで、望んでいたのです。 、欲しかった！

まさか、ちょっと調べてみましょう！

[推奨学習: css ビデオ チュートリアル ]

1. 背景フィルターはチートですか?

すりガラス効果は、メッセージ通知バーやモバイル アシスタント カードなど、iOS システムで比較的よく見られるものなので、Apple の公式 Web サイトを開いて見てみましょう。

# 予想どおり、ナビゲーション バーには「

すりガラス」#の「ファミリー デザイン」特殊効果が使用されています。 ## コンソールを開いて宿題をコピーします:

主に

backdrop-filter

CSS3 のプロパティを使用するので、簡単に使用できました。 メイン カードの CSS コードは次のとおりです:

.card-backdrop-filter {
    position: relative;
    z-index: 1;
    width: 600px;
    height: 300px;
    border-radius: 6px;
    padding: 10px;
    color: #fff;
    font-size: 16px;
    overflow: hidden;
    margin: 100px auto;
    backdrop-filter: blur(10px);
    background-color: rgba(255,255,255,0.72);
  }

Chrome ブラウザでは効果は問題ありません:

次に、某局旧Android版のモバイル版で試してみましたがダメでした！ ！ ！

互換性を確認します:

backdrop-filter -- caiuse

emmm~ そして、独自の魔法の変更された Webview カーネル状況を検討してください。 。 。 。

別の方法を見つける必要があります。ここに付け加えておきます。

filter

はフィルターとして理解できます。backdrop-filter は背景のフィルター効果を設定します。現在サポートされている CSS フィルター効果は <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">blur(): 模糊 brightness(): 亮度 contrast(): 对比度 drop-shadow(): 阴影 grayscale(): 灰度 hue-rotate(): 色相旋转 invert(): 反色 opacity(): 透明度 saturate(): 饱和度 sepia(): 褐色</pre><div class="contentsignin">ログイン後にコピー</div></div> です。 互換性を考慮しない場合、

backdrop-filter

はサポートされていないブラウザーでは背景色を直接表示します。つまり、設定された効果は失われます ( 「 エクスペリエンス ダウングレード」)。 ミス UI とブラザー PM が同意できるのであれば、ぜひ皆さんにもそれを使用することをお勧めします。

2. フィルター、試してみませんか?

ぼかしを設定するためのもう 1 つの CSS プロパティは

filter

です。そのため、

filter エフェクトを通じて backdrop-filter プロパティをシミュレートするという別のアイデアがあります。 そして、filter

の互換性も向上します:

filter -- caiuse

見てみましょうfilter

と

backdrop-filter の効果の違い:

/* filter 的写法，将 backdrop-filter 属性替换为 filter */
.card-filter {
  position: relative;
  z-index: 1;
  width: 600px;
  height: 300px;
  border-radius: 6px;
  padding: 10px;
  color: #fff;
  font-size: 16px;
  overflow: hidden; /* 隐藏超出元素区域外的内容 */
  margin: 100px auto;
  filter: blur(10px);
  background-color: rgba(255,255,255,0.72);
}

この効果は実際の設計要件とは大きく異なるため、変更する必要があります。

3. フィルターの組み合わせパンチ

filter

は要素の背景コンテナーではなく要素全体のあいまいさを設定するため、and カードが必要です プレースホルダー要素同じサイズのこれらを使用してぼかしを個別に設定し、背景要素として機能します。

3.1 ::before固定二重背景画像

私はここで怠け者なので擬似要素を直接使用します::before

実際のシナリオでの互換性を考慮するため、引き続き

div ブロック レベル要素プレースホルダー

.card-filter::before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; /* 放到当前 card-filter 元素的底部 */
  filter: blur(10px); /* 模糊度 */
  background: url(http://p2.qhimg.com/bdr/__85/t01781bd4b1218329e1.jpg) no-repeat center fixed;
  background-size: cover;
}

を使用することをお勧めします。ここで、カードは全体と同じ背景画像属性を使用することに注意してください。背景画像は fixed

によって固定されているため、要素がどの方向にスクロールされても背景画像は移動せず、背景効果の一貫性が保証されます

3.2 利用 margin 属性的负值扩大容器

模糊度的效果如下图，还是有差异，因为 filter 是从容器外边框向内聚合的一个滤镜，导致滤镜外边框有一个白圈

此时只需要扩大 ::before 元素的容器大小，这里直接可使用 margin 属性负值扩大容器

.card-filter::before {
  ...
+ margin: -20px;
}

此时的效果就有点“那个意思了”，看来快可以交差了

3.3 ::after 填补消失的背景色

原本设置在 .card-filter 类上的 background-color: rgba(255, 255, 255, 0.72); 没起作用！

因为 ::before 伪类作用于 .card-filter 元素内，是其子元素，又因为 ::before 的 background 属性设置了背景图，遮盖了父元素 .card-filter 的背景色。

知道了原因，那么我们就可以在 .card-filter 元素内再添加一个子元素（伪类），用于设置背景色！

再偷个懒，直接使用 ::after 伪类，就不用改造 DOM 结构。

.card-filter::after {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.72);
}

此时，效果就和 backdrop-filter 的效果相同：

放到“自研”的 Webview 内核中也能看到效果了！

四、总结

总的来说，如果能说服产品经理和 UI 小姐姐的话，咱就用 backdrop-filter，说服不了就用 filter 的组合拳模拟吧！

另外 backdrop-filter 属性是有性能问题的，咱就是说，都 2022 年了，求求大家升级一下手上的设备吧！，兼容性真让前端工程师秃头儿！

如果“毛玻璃”和背景没有文中的相对移动，直接让 UI 小姐姐切个图，直接解决一切兼容性 & 性能问题！

在研究过程中，笔者还尝试过 SVG 的 feGaussianBlur 标签，效果和 filter 一样，会稍微复杂一些，不过也是个可施行的方案，大家可自行尝试下～

原文地址：https://juejin.cn/post/7070325873202692104

（学习视频分享：web前端）

以上がCSS を使用してすりガラス効果を実現する方法について話しましょう (互換性ソリューションの探求)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。