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

时间：2022-01-10 23:38:56

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

写在前面

毛玻璃背景是一个很常见的网页样式，想要实现，其实并不难，但经过我在网上的搜索发现，大量实现方法都较为不规范，且把问题复杂化了（例如各种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毛玻璃效果&lpar;blur&rpar;有白边问题

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

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

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

随机推荐

  1. Mybatis环境

    第一步:下载jar包并导入 1.mysql驱动包 2.mybatis环境包 第二步:创建MYSQL数据库 由于这是用于测试,只创建了test-usreinfo数据表 第三步:在src文件夹中创建myb ...

  2. C&num;Winform连接Oracle数据库 &comma; 及角色讲解

    http://blog.sina.com.cn/s/blog_900ca29d0102vn3r.html 一.连接方法 (1)System.Data.OracleClient 注意1:此方法在.NET ...

  3. vs2013-tfs-疑问之版本控制器路径有双引号解决办法

    问题描述: 最近项目:“****”展示交易平台 ,所以版本控制器路径为: 导致生成解决方案提示:路径有问题 解决办法: 1.直接在版本控制器重命名是不支持的,需要安装:  Visual Studio ...

  4. ASP&period;NET Web API与Rest web api（一）

    本文档内容大部分来源于:http://www.cnblogs.com/madyina/p/3381256.html HTTP is not just for serving up web pages. ...

  5. Python学习日记：day6----小知识点总结

    小知识点总结 一.Python2与Python3 的区别 1.Python2中可以加括号输出,也可不加输出     Python3中必须加 2.python2 中有xrange(生成器)也有range ...

  6. （基础）codeVs2235 机票打折

    题目描述 Description .输入机票原价(3到4位的正整数,单位:元),再输入机票打折率(小数点后最多一位数字).编程计算打折后机票的实际价格(单位:元.计算结果要将个位数四舍五入到十位数“元 ...

  7. HBuilder后台保活开发（后台自动运行，定期记录定位数据）

    http://ask.dcloud.net.cn/question/28090 后台自动运行,定期记录定位数据 分类:HTML5+   各位新年好 小弟以前用hbuilder开发过几个项目,现在有一新 ...

  8. java学习3创建学生属性：学号、姓名、电话 完全实现对象集合的增删改查。（控制台来做）

    首先创建一个student类其中包括get,set与构造函数 /** * */package work2; /** * @author Administrator * */public final c ...

  9. 【虚拟机】安装vmtools之后任然不能在虚拟机和主机之间复制粘贴的问题

    一.卸载 ../bin/vmware-uninstall-tools.pl rm -rvf /usr/lib/vmware-tools apt-get install open-vm-tools-de ...

  10. vs的一个奇葩错误 ： 未能找到任何适合于指定的区域性或非特定区域性的资源&period;&period;&period;

    摘要: VS2005下进行开发的时候遇到的问头:未能找到任何适合于指定的区域性或非特定区域性的资源.请确保在编译时已将“xxx.Form1.resources”正确嵌入或链接到程序集“xxx”,或者确 ...

相关文章