Let’s talk about how to use CSS to achieve frosted glass effects (exploration of compatibility solutions)

UsingCSSHow to achieve the frosted glass effect? The following article will introduce to you how to use CSS to achieve frosted glass special effects (exploration of compatible solutions). I hope it will be helpful to you!

Some time ago, I used the filter effect of "Gaussian Blur" in a project. I tried a variety of solutions during the process. Here is a way to summarize, I hope it can help fellow Taoists in need~

UI Miss Sister insisted on letting me support the realization of what we commonly call the "frosted glass" effect on the customized Webview of the Android system. It was said that it must be achieved. If this effect is not achieved, the soul of the design will be lost. However, I explained it in every possible way, and she wanted it, wanted it, wanted it!

No way, let’s do some research!

[Recommended learning: css video tutorial]

1. Is background-filter a cheat?

The frosted glass effect is relatively common on iOS systems, such as message notification bars, mobile assistant cards, etc., so let’s open Apple’s official website and take a look!

As expected, the navigation bar uses the "Family Design" special effect of "frosted glass"

Open the console and copy the homework:

Mainly uses the properties of backdrop-filter CSS3, so I used it easily.

The main card CSS code is as follows:

.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);
  }

The effect looks OK in the Chrome browser:

Then go to a certain station I tried it on the mobile version of the old Android version, but it didn’t work! ! !

Check the compatibility: backdrop-filter -- caiuse

emmm~, and then consider our own magic Changed Webview kernel situation. . .

We need to find another way. Let me add here. filter can be understood as a filter. backdrop-filter is to set a filter effect for the background. CSS currently The supported filter effects are

blur(): 模糊
brightness(): 亮度
contrast(): 对比度
drop-shadow(): 阴影
grayscale(): 灰度
hue-rotate(): 色相旋转
invert(): 反色
opacity(): 透明度
saturate(): 饱和度
sepia(): 褐色

If compatibility is not considered, backdrop-filter will directly display the background color on unsupported browsers, that is, the set effect will be lost (" Experience downgrade").

If Miss UI and Brother PM can agree, I highly recommend everyone to use it. After all, who doesn’t want to get off work early to study?

2. Filter, give it a try?

Another CSS property for setting blur is filter, so another idea we have is to simulate the backdrop-filter property through filter Effect.

And the compatibility of filter will be better: filter -- caiuse

Let’s see# The difference between the effects of ##filter and 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);
}

This effect is very different from the actual design requirements, so it needs to be modified. !

3. Combination punch of filter

Because

filter sets the fuzziness of the entire element rather than the background container for the element, so a and card is needed Placeholder elements of equal size are used to set the blur individually and serve as background elements.

3.1 ::before fixed double background image

I am lazy here and use pseudo elements directly

::before, in order to consider compatibility in actual scenarios, it is recommended that you still use div block-level element placeholder

.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;
}

Note here that the card uses the same background image attribute as the entire container. The background image is fixed by

fixed, so that when the element is scrolled in any direction, the background image will not move, ensuring that the background effect is consistent

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前端）

The above is the detailed content of Let’s talk about how to use CSS to achieve frosted glass effects (exploration of compatibility solutions). For more information, please follow other related articles on the PHP Chinese website!