CSS 实现毛玻璃效果

Author： YH_evIs
发布时间：October 31, 2019
24969views
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

玉明
随机找的，用fofa网络空间测绘引擎，专门找typecho的站...
玉明
好兄弟，能再分享一下吗
CodeSkyStar
博客链接:https://blog.codeskystar.cn/
CodeSkyStar
博客重新搭好了，访问速度这次绝对杠杠的。还在边用边测试，本周更...
比利海灵顿
<script>console.log('test...

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

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

我的第一篇博客文章

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

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

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

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

为什么那么多站点用React？React究竟好在哪？

JavaScript的垃圾回收机制与内存空间

【转载】用css制作充电效果

CSS 实现毛玻璃效果