CSS实现底层毛玻璃效果的方法
这篇文章给大家分享的是有关CSS实现底层毛玻璃效果的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
创新互联建站长期为成百上千客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为高坪企业提供专业的成都网站制作、网站设计,高坪网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
毛玻璃背景是一个很常见的网页样式,想要实现,其实并不难,但经过我在网上的搜索发现,大量实现方法都较为不规范,且把问题复杂化了(例如各种z-index属性和position的定位)
现提供一个代码很直白且实现效果良好的实现方案,改良自W3Schools
HTML部分
FrostedGlass this is FrostedGlass
.mainHolder是主框体
.textHolder是毛玻璃区域
.p是浮于毛玻璃上的文字内容
CSS部分
* { box-sizing: border-box; } .mainHolder { width: 600px; height: 600px; background-image: url(/upload/otherpic58/11353.jpg); background-attachment: fixed; background-position: center; background-size: cover; position: relative; } .textHolder { width: 100%; height: 200px; position: absolute; right: 0; bottom: 0; background: inherit; overflow: hidden; } .textHolder::before { content: ''; position: absolute; top:0; right: 0; bottom: 0; left: 0; background: inherit; background-attachment: fixed; filter: blur(4px); } .textHolder::after { content: ""; position: absolute; top:0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.25); } p { z-index: 1; color: white; position: relative; margin: 0; }
解决毛玻璃效果里最核心的问题:模糊效果不能影响字体,采用了伪元素::after于::before
值得注意的是,在p标签里的position属性。设置为relative后,会将p从被遮挡状态“提起来”。
另外,对于不同的浏览器内核,filter的写法会有些许不同。
感谢各位的阅读!关于CSS实现底层毛玻璃效果的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
文章名称:CSS实现底层毛玻璃效果的方法
转载源于:http://ybzwz.com/article/johohc.html