写在前面

毛玻璃背景是一个很常见的网页样式，想要实现，其实并不难，但经过我在网上的搜索发现，大量实现方法都较为不规范，且把问题复杂化了（例如各种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. selenium自动化测试工具模拟登陆爬取当当网top500畅销书单

    selenium自动化测试工具可谓是爬虫的利器,基本动态加载的网页都能抓取,当然随着大型网站的更新,也出现针对selenium的反爬,有些网站可以识别你是否用的是selenium访问,然后对你加以限制 ...

  2. 113、stack的优势 （Swarm20）

    参考https://www.cnblogs.com/CloudMan6/p/8157391.html   stack 将应用所包含的service,依赖的secret volume 等资源,以及他们之 ...

  3. 06 Python之列表和元组

    1. 什么是列表 定义: 能装对象的对象 在python中使用[]来描述列表, 内部元素用逗号隔开. 对数据类型没有要求 列表存在索引和切片. 和字符串是一样的. 2. 相关的增删改查操作 添加: 1 ...

  4. SuperMap webgl对接iportal托管的三维服务

    在webgl中对接iportal加密的三维服务时,需要提前注册key值.Cesium.Credential.CREDENTIAL = new Cesium.Credential("你的key ...

  5. IDEA修改Maven全局配置

    在使用过程中发现,IDEA每次新建一个Project ,这个maven配置都会初始化默认的. 这里需要设置下全局配置: File -> Other Settings -> Settings ...

  6. 为什么wamp 放两个网站 或者多个网站就很卡很慢，问题在这里

    PHP的配置比较简单,只需要进行一些基本设置的修改就可以了,依次点击—PHP—php.ini,找到这三个地方:short_open_tag = Off(是否允许使用 PHP 代码开始标志的缩写形式(& ...

  7. Delphi 键盘的编程

  8. 7、Linux权限管理-基本权限

    1.权限概述 1.1.什么是权限? 我们可以把它理解为操作系统对用户能够执行的功能所设立的限制,主要用于约束用户能对系统所做的操作,以及内容访问的范围,或者说,权限是指某个特定的用户具有特定的系统资源 ...

  9. linux ftp 添加用户及权限管理

    Linux下创建用户是很easy的事情了,只不过不经常去做这些操作,时间久了就容易忘记,顺便配置一下FTP.声明:使用Linux版本release 5.6,并以超级管理员root身份运行. 1.创建用 ...

  10. ubuntu版本查看命令

    简单的 在命令终端输入 1.cat /etc/issue (简单) 2.cat /etc/lsb-release(具体) 3.uname -a(内核) 具体的 有时候我们安装软件或者搭建服务的时候,需 ...