CSS 实现毛玻璃效果

Author： YH_evIs
发布时间：October 31, 2019
24667views
One comment
2090字数
Categories： CSS

## 实现思路

具体效果展示可见红框框起来的部分

实现该效果的方法有多种多样，但最泛用的都是利用伪元素的滤镜效果实现：

```css
filter: blur();
```

利用blur属性可以直接让元素呈高丝模糊状态：

wlop大佬的原图：
<img src="https://yhevis.top/usr/uploads/2019/10/1334039720.jpg" alt="mbl_2.jpg" />

添加了blur属性后：
<img src="https://yhevis.top/usr/uploads/2019/10/1678396070.jpg" alt="mlb_3.jpg" />

我们可以看到元素确实是呈高丝模糊状态了，但是边缘羽化过于严重，而且我们会发现blur把连同在内的文字全部模糊了：
<img src="https://yhevis.top/usr/uploads/2019/10/1209960997.jpg" alt="mlb_4.jpg" />

要解决这两个问题我们就需要给伪元素设置这两个样式：

```css
z-index:-z;
```

```````````````````````````
//让文字覆盖伪元素
```````````````````````````

和

```css
margin:-30px;
```

``````````````````````````````````````````````````````````````````
//这里的值只要是负的就行，会帮忙解决羽化问题
``````````````````````````````````````````````````````````````````

接着为了不让羽化范围溢出边界所以我们要给元素本身添上

```css
overflow: hidden;
```

这个样式。

## 整体效果

## 整体代码

```css
body{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
main{
width: 70%;
height: 500px;
}
body,main::before{
background: url("背景图片路径.jpg") 0 / cover fixed;    
}
main{ 
position: relative;
background: hska(0,0%,100%,.3);
overflow: hidden;  
padding: 20px; 
}

main::before{    
position: absolute;
top:0;
right:0;bottom:0;left:0;
filter: blur(20px);
margin:-30px;   
z-index: -1; 
}
```

## 参考资料

<a href="https://www.cnblogs.com/ghost-xyx/p/5677168.html" target="_blank">CSS技巧收集——毛玻璃效果</a>
<a href="https://www.zhangxinxu.com/wordpress/2013/11/css-svg-image-blur/" target="_blank">张鑫旭大佬写的</a>

Last modification：July 24th, 2020 at 05:17 pm

如果觉得我的文章对你有用，请随意赞赏

One comment

两仪橙
November 1st, 2019 at 09:16 am

从寒冬处暑长到花枝招展
手指粗糙不堪
肌肤黝黑肿胀
眼神萎靡涣散
浑身似不胜力
一朝一夕
也曾海阔凭鱼跃
一身臃肿的肥肉
一颗百沾污浊的内心
一双看不清世界的眼
一颗不知未来朝向何方的骷髅头
也曾怀疑过
也未曾怀疑
可破碎的海绵体
折射不出一毫的五彩斑斓
我也曾回忆
苏轼不教岁月愁
望穿阑干
看不尽灯笼梦与候
我不是陶瓷
我无法言说
吃一碗盐
长六七米路
他日辉煌不依旧
几度夕阳
再回首
往事从头
10/21/2019

Reply

CodeSkyStar
博客链接:https://blog.codeskystar.cn/
CodeSkyStar
博客重新搭好了，访问速度这次绝对杠杠的。还在边用边测试，本周更...
比利海灵顿
<script>console.log('test...
比利海灵顿
it's good for you
两仪橙
铁疙瘩山雨欲来风满楼小乔诸葛存心忧二零一二再回首惟愿悬壶任漂泊...

CSS 实现毛玻璃效果

YH_evIs • 2019 年 10 月 31 日

## 实现思路

具体效果展示可见红框框起来的部分

实现该效果的方法有多种多样，但最泛用的都是利用伪元素的滤镜效果实现：

```css
filter: blur();
```

利用blur属性可以直接让元素呈高丝模糊状态：

wlop大佬的原图：
<img src="https://yhevis.top/usr/uploads/2019/10/1334039720.jpg" alt="mbl_2.jpg" />

添加了blur属性后：
<img src="https://yhevis.top/usr/uploads/2019/10/1678396070.jpg" alt="mlb_3.jpg" />

要解决这两个问题我们就需要给伪元素设置这两个样式：

```css
z-index:-z;
```

```````````````````````````
//让文字覆盖伪元素
```````````````````````````

和

```css
margin:-30px;
```

``````````````````````````````````````````````````````````````````
//这里的值只要是负的就行，会帮忙解决羽化问题
``````````````````````````````````````````````````````````````````

接着为了不让羽化范围溢出边界所以我们要给元素本身添上

```css
overflow: hidden;
```

这个样式。

## 整体效果

## 整体代码

main::before{    
position: absolute;
top:0;
right:0;bottom:0;left:0;
filter: blur(20px);
margin:-30px;   
z-index: -1; 
}
```

## 参考资料

CSS 实现毛玻璃效果

Leave a Comment Cancel reply

One comment

Hello world

【学习笔录】每周一道算法题：斐波那契数列

我的第一篇博客文章

【学习笔录】每周一道算法题：括号生成

【学习笔录】每周一道算法题：串联字串

Markdown 语法

【学习笔录】每周一道算法题：hash思想

究竟是宝贝还是糟粕——浅谈那些会被 leader 打的 JavaScript 编程技巧

利用Js批量删除QQ空间说说

【学习笔录】每周一道算法题：斐波那契数列

CSS 实现毛玻璃效果