介绍

利用伪类+CSS backdrop-filter 实现毛玻璃效果，无需将图片进行叠层或裁剪。
backdrop-filter 是一种CSS属性，可以为一个元素后面区域添加图形效果（如模糊或颜色偏移）。

参考自 MDN CSS backdrop-fliter

一、效果

二、代码

1.HTML部分

<div class="links"><div class="sheet"><div class="link"><div class="icon"><img src="../images/platform-01.png" alt=""></div><div class="name">政府采购</div></div></div>
</div>

2.CSS部分

背景

.links {background: url('../images/platform-bg.png');width: 100%;margin-top: 0.75rem;padding: 1.85rem 0.28rem;background-repeat: no-repeat;background-size: cover;background-position: center center;/* sheet */display: flex;flex-wrap: wrap;justify-content: center;
}

毛玻璃模块

.sheet {margin: 0.65rem 0.35rem;width: 6.25rem;height: 5.75rem;padding: 0.8rem;border-radius: 0.63rem;background-color: rgba(255, 255, 255, 0.2);position: relative;overflow: hidden;z-index: 1;
}
.sheet::before {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;/* 模糊效果：通过blur控制模糊程度 */backdrop-filter: blur(0.5rem);z-index: -1;
}

注意：

如果将模糊效果直接使用在 .sheet 中，会导致内层的icon和文字产生同样的模糊效果，类似于 opacity 属性。
为避免伪类干扰，使用 z-index 将两者层级分开。

总结

该写法可搭配 display: flex 等，形成更好的整体视觉感官。
注意：backdrop-filter 不兼容于IE。

CSS backdrop-filter 实现毛玻璃效果无需定位裁剪图片相关推荐

CSS实现背景图毛玻璃效果和如何保持图片上的文字显示正常
说明因为我的底子特别的差(大佬勿喷),今天想让文字在图片上方显示,并且给图片模糊,结果当图片模糊之后也就是实现毛玻璃效果后,发现图片上的文字也模糊掉了,这个问题当然可以用伪元素的方式解决,但是由于某 ...
web——CSS精灵图（背景图、定位背景图片background-position属性）
web--CSS精灵图(背景图.定位背景图片background-position 属性) 一.background-position属性二.实例一.background-position属性例 ...
flutter 背景图片毛玻璃效果
1.引入图片滤镜文件import 'dart:ui';2.在Stack组件中堆叠,产生图标毛玻璃效果若不使用图片毛玻璃,仅仅是背景模糊透明,用Opacity组件就可实现第一个组件为图片第二个组件为图片 ...
css filter blur 白边,解决css3毛玻璃效果(blur)有白边问题
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = window.innerWidth || document.documentElement.clientWidth || ...
css filter blur 白边,如何解决CSS3毛玻璃效果blur有白边的问题
如何解决CSS3毛玻璃效果blur有白边的问题发布时间:2021-06-29 11:59:54 来源:亿速云阅读:81 作者:小新这篇文章给大家分享的是有关如何解决CSS3毛玻璃效果blur有白 ...
CSS技巧收集——毛玻璃效果（深入理解滤镜filter）
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 原文链接 ...
html盒子毛玻璃效果,css毛玻璃效果（外加background属性）
前因: 后果,二话不说,上效果: 注意:此方法只适合body设置背景图时的模糊. 页面布局方面,主要父元素为body,子元素为想要的效果,涉及到的知识点:background.filter.定位.伪元 ...
css毛玻璃效果白边_css3毛玻璃效果白边问题
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...
css毛玻璃效果白边_css3毛玻璃效果白边问题_html/css_WEB-ITnose
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...
filter:blur() 实现毛玻璃效果
使用玻璃效果比普通效果中的文字更易阅读,而且整体美观.在过去,我们通常把文本框区域的背景做模糊处理,随后使用一整张背景.不仅消耗性能,而且在HTML方面难以修改维护. 我们用filter:blur() ...

CSS backdrop-filter 实现毛玻璃效果无需定位裁剪图片

文章目录

介绍

一、效果

二、代码

1.HTML部分

2.CSS部分

总结

CSS backdrop-filter 实现毛玻璃效果无需定位裁剪图片相关推荐

最新文章

热门文章

CSS backdrop-filter 实现毛玻璃效果 无需定位裁剪图片

文章目录

介绍

一、效果

二、代码

1.HTML部分

2.CSS部分

总结

CSS backdrop-filter 实现毛玻璃效果 无需定位裁剪图片相关推荐

最新文章

热门文章

CSS backdrop-filter 实现毛玻璃效果无需定位裁剪图片

CSS backdrop-filter 实现毛玻璃效果无需定位裁剪图片相关推荐