189 8069 5689

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实现底层毛玻璃效果的方法
网页URL：http://cdxtjz.cn/article/johohc.html

其他资讯