实现一个成熟的底层毛玻璃效果（纯CSS）

沈俭发布于2019-08-02 12:07 / 1711人阅读

摘要：设置为后，会生效，将从被遮挡状态提起来。另外，对于不同的浏览器内核，的写法会有些许不同。

写在前面

毛玻璃背景是一个很常见的网页样式，但大量实现方法都把问题复杂化了
现提供一个代码很直白且实现效果良好的实现方案，改良自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后，z-index会生效，将p从被遮挡状态“提起来”。
另外，对于不同的浏览器内核，filter的写法会有些许不同。

GPU云服务器云服务器图片毛玻璃效果 Android毛玻璃效果 php的数组底层实现纯CSS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53346.html

实现一个成熟的底层毛玻璃效果（纯CSS）

摘要：设置为后，会生效，将从被遮挡状态提起来。另外，对于不同的浏览器内核，的写法会有些许不同。 showImg(https://segmentfault.com/img/bVbj6zV?w=599&h=600); 写在前面毛玻璃背景是一个很常见的网页样式，但大量实现方法都把问题复杂化了现提供一个代码很直白且实现效果良好的实现方案，改良自W3Schools HTML部分 ...

endiat 2019-08-29 17:22 评论0 收藏0
CSS开发

摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。【译】CSS 十六进制颜色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 评论0 收藏0
页面顶部背景图片如何设置上半部分为毛玻璃效果

摘要：第二层要设置毛玻璃高度，和。要添加的背景图片实际高度为最终展示的毛玻璃高度设置为后，若不设置，由于是空的，导致为毛玻璃高度要比最终的高度大才行上移设置和是为了左右边缘也模糊度好设置模糊度在和下显示都，在中没有模糊效果，添加即可。恩，我希望得到下图这种效果。showImg(https://segmentfault.com/img/bVGosE?w=1919&h=400); 看起来so ...

plus2047 2019-08-30 13:11 评论0 收藏0
ReactNative开发常用的三方模块

摘要：写在前面一个好的缺不了好的三方支持，生活在这个活跃的开源社区，寻找合适的三方组件是一个开发者最基本的能力。下面分享几个我收集的三方模块，希望对大家有点帮助。写在前面一个好的App缺不了好的三方支持，生活在ReactNative这个活跃的开源社区，寻找合适的三方组件是一个开发者最基本的能力。不过不积跬步，无以至千里，不积小流，无以成江海。下面分享几个我收集的三方模块，希望对大家有点帮...

frolc 2019-08-20 15:27 评论0 收藏0