当前位置:  首页  >  前端开发  >  CSS+DIV

纯CSS实现底层毛玻璃效果(代码示例)

本篇文章给大家带来的内容是关于纯CSS实现底层毛玻璃效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

本篇文章给大家带来的内容是关于纯CSS实现底层毛玻璃效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

毛玻璃背景是一个很常见的网页样式,想要实现,其实并不难,但经过我在网上的搜索发现,大量实现方法都较为不规范,且把问题复杂化了(例如各种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(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.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实现底层毛玻璃效果(代码示例)的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有