写在前面

毛玻璃背景是一个很常见的网页样式，想要实现，其实并不难，但经过我在网上的搜索发现，大量实现方法都较为不规范，且把问题复杂化了（例如各种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. O004、启动第一个KVM虚机

    参考https://www.cnblogs.com/CloudMan6/p/5249270.html   本节演示如何使用 virt-manager 启动 KVM 虚机,   提前下载一个 cirro ...

  2. 移动端H5开发自适应技巧

    移动端H5开发,必要要做到自适应各种分辨率的手机,下面由我为大家大致说一下,需要3步走 第一:head标签中添加: <meta name="viewport" content ...

  3. 第一篇 HTML 认识HTML

    认识HTML 学习一门语言,我们要先了解它,可以不用太资深,但要做到别人问,你能回答得出来! 注:推荐大家去网址:www.w3school.com.cn 前端学习手册(免费的) HTML(超文本标记语 ...

  4. dubbo学习笔记二（服务调用）

    项目结构 代码示例 由于之前的IEchoService 的一个方法只是在服务端控制台打印,不便在浏览器测试,所以新添加的方法 api和服务端代码变更 public interface IEchoSer ...

  5. CentOS 7系统时间与实际时间差8个小时

    1.查看系统时间: [root@localhost sysconfig]# timedatectl Local time: 一 2017-11-06 21:13:19 CST Universal ti ...

  6. NumPy 简介及安装

    NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库.NumPy 的前身 Numeric 最早是 ...

  7. php socket如何实现长连接

    长连接是什么? 朋友们应该都见过很多在线聊天工具和网页在线聊天的工具.学校内有一种熟悉的功能,如果有人回复你了,网站会马上出现提示,此时你并没有刷新页面:Gmail也有此功能,如果邮箱里收到了新的邮件 ...

  8. cyopen注释掉导入的动态函数

    cyopen注释掉导入的动态函数 cyopen注释掉导入的动态函数 cyopen注释掉导入的动态函数

  9. maven私仓搭建——nexus3

    maven私仓搭建——nexus3本文主要介绍maven私仓在windows下的搭建.本文主要参考:http://www.cnblogs.com/bingyeh/p/5913486.html好,下面上 ...

  10. TCP/IP网络编程系列之一(初级)

    概述 网络编程实际上就是编写程序使两台联网的计算机相互的交换数据.操作系统会提供名为“ 套接字 ”的部件.套接字是网络数据传输的软件设备,即使对网络数据传输原理不太熟悉也无关紧要.我们也能通过套接字完 ...