写在前面

毛玻璃背景是一个很常见的网页样式，想要实现，其实并不难，但经过我在网上的搜索发现，大量实现方法都较为不规范，且把问题复杂化了（例如各种z-index属性和position的定位）
现提供一个代码很直白且实现效果良好的实现方案，改良自W3Schools

HTML部分

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title>FrostedGlass</title>

    <link rel="stylesheet" href="frostedGlass.css">

  </head>

  <body>

    <div class="mainHolder">

      <div class="textHolder">

        <p>this is FrostedGlass</p>

      </div>

    </div>

  </body>

</html>

.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）的更多相关文章

  1. marquee标签跑马灯连续无空白播放效果 纯CSS（chrome opera有效）

    marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...

  2. CSS技巧收集——毛玻璃效果

    先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...

  3. css透明度、毛玻璃效果

    透明度: 1.opacity    背景颜色和字体同时透明 2.background:rgba(255,255,255,0.2);   只是背景颜色透明,字体不透明 代码: .info{ backgr ...

  4. 基于flexbox纯css框架的解析

    学CSS很好的一个方法大概是先用纯CSS来实现一个自己的框架,然后便可以在之后的使用中对一开始可能很粗糙的框架做细致的优化与改进,删除些冗余,添加些功能之类的. 当然,为了避免一开始写框架时候的时候手 ...

  5. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  6. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  7. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  8. 解决css3毛玻璃效果(blur)有白边问题

    做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: <body> <div class="login-wrap"> <div class= ...

  9. Swift 之模糊效果（毛玻璃效果，虚化效果）的实现

    前言: 之前项目中有用到过Objective-C的的模糊效果,感觉很是不错,而且iOS8之后官方SDK也直接提供了可以实现毛玻璃效果的三个类:UIBlurEffect.UIVibrancyEffect ...

随机推荐

  1. idea-代码格式化快捷键设置（2019.1版）

    idea默认格式化快捷键是:Ctrl+Alt+L,有时会因其它软件快捷键的冲突导致失灵. 设置方法如下: 1.File -->  Settings... 2. Keymap -> Code ...

  2. TCP 三次握手和四次挥手

    TCP 三次握手和四次挥手 作为面试会被经常考察的的点,自己复习了一下,总结如下: TCP 三次握手 先上图: 所谓三次握手,是指建立一个 TCP 连接时,需要客户端和服务器总共发送 3 个包. 第一 ...

  3. DataX操作指南

    1.DataX介绍 DataX DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.SqlServer.Postgre.HDFS.Hive.ADS.HB ...

  4. java之设计模式汇总

    1.单例模式 就是一个类只产生一个对象 对应数据库连接 定时执行者服务(ScheduledExecutorService) 在整个项目中应该只有一个对象 2.工厂模式 定义一个用于创建对象的接口 让子 ...

  5. 获取iframe中的tree

    window.frames["iframe_name"].document.getElementById("..."); 或者 window.frames['i ...

  6. luogu P3226 [HNOI2012]集合选数

    luogu 因为限制关系只和2和3有关,如果把数中2的因子和3的因子都除掉,那剩下的数不同的数是不会相互影响,所以每次考虑剩下的数一样的一类数,答案为每类数答案的乘积 如果选了一个数,那么2的因子多1 ...

  7. kill指定用户所有进程

    在linux系统管理中,我们有时候需要kill某个用户的所有进程,这里有以下几种方法,以heboan用为例 pkill方式 pkill -u heboan killall方式 killall -u h ...

  8. pgsql sql字段拼接

    1.  一条记录数据字段拼接 语法:concat_ws('拼接符号',字段名,more fields) 例子:concat_ws(':',username,sex)2. 多条记录字段拼接 语法:con ...

  9. Spring Boot整合actuator实现监控管理

    Spring Boot使用actuator监控管理 1.在pom文件中导入相关的依赖 <dependency> <groupId>org.springframework.boo ...

  10. nginx-轮询、权重、ip_hash 、fair模式

    在 linux 下有 Nginx.LVS.Haproxy 等等服务可以提供负载均衡服 务,而且 Nginx 提供了几种分配方式(策略): 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器 ...