写在前面

毛玻璃背景是一个很常见的网页样式，想要实现，其实并不难，但经过我在网上的搜索发现，大量实现方法都较为不规范，且把问题复杂化了（例如各种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. java -cp 执行jar包里的某个类

    当我们需要测试某个功能时,需要在linux环境下执行某个类的main方法来测试 可以使用java -cp xxx.jar com.MyClass来执行某个类 java -cp test.jar:lib ...

  2. C中的函数指针的用法

    include<stdio.h> typedef int (*Cal)(int a,int b);//定义一个函数指针,第一个int是指向函数的返回值的类型,后面括号里面的两个int是指指 ...

  3. JS基础_JS的HelloWorld

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Spingboot项目的创建与启动（基于IDEA）

    一.Springboot的创建 1.Springboot的优点: Springboot是来简化Spring框架,从而能够更加简单快捷的构建Spring应用的框架,其具有如下优点: ①为所有Spring ...

  5. ldap搭建

    yum install openldap openldap-servers openldap-clients -y #检查是否安装成功 slapd -VVopenldap的配置文件都在/etc/ope ...

  6. 基于mini2440嵌入式Linux根文件系统制作(Initramfs和nfs两种跟文件系统)

    嵌入式系统由三部分构成: 1.bootoader---bootparameters---2.kernel 3.Root-filesysytem 一个内核可以挂载多个文件系统,但是有一个根文件系统所以叫 ...

  7. Rinetd 通过ECS端口转发到内网RDS

    前置条件 实现目的:开发本地电脑需要连接没有外网地址的RDS,通过ECS进行转发连接到RDS数据库 客户 PC 终端可以 ssh 登录有公网的 ECS 服务器. 有公网的 ECS 服务器可以通过内网访 ...

  8. 火狐插件simple timer 定时打开指定网页

    今天我要介绍的是火狐浏览器一款插件:Simple Timer,该插件是火狐一个可以添加计时器和定时提醒功能插件,该插件的主要作用就是当你的设置在某一个时刻提醒时,插件会自动弹出通知,并且自动打开你想要 ...

  9. QT的DPI支持

    在main函数第一行加入: QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 鼠标不按下也响应移动事件: setMouseTra ...

  10. 【hiho1035】自驾旅行III

    题目大意:给定一棵 N 个节点的有根树,1 号节点为根节点,树边有两个权值,分别为走路的代价和开车的代价.有一个旅行者开车要从根节点出发,必须遍历给定点集,可以在任何位置停止旅行,有车时可以选择开车或 ...