其实毛玻璃很简单

只需要在css中加入

backdrop-filter:blur(8px);

8px是模糊力度

注意：使用该方法前需要设置背景不能是透明（如果是显示这个元素下面的图像记得半透明，例子就是）

完整例子：

例子目录下有一个背景图片 bg.jpg 和css文件 毛玻璃.css

HTML:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>标题</title>

        <style>

            body{

                background-image:url('bg.jpg');

                background-repeat:no-repeat;

                background-attachment:fixed;

                background-position:center;

            }

            *{

                padding: 0;

                margin: 0;

            }

            #main{

                width:600px;

                height:300px;

                position: absolute;

                top: 50%;

                left: 50%;

                transform: translate(-50%, -50%);

                background-color:rgba(255,255,255,0.6);

                border-radius:25px;

            }

            #text{

                position: absolute;

                left: 50%;

                top: 50%;

                transform: translate(-50%, -50%);

            }

        </style>

        <link rel="stylesheet" href="毛玻璃.css" type="text/css" />

    </head>

    <body id="body-id">

        <div id="main">

            <h1 id="text">毛玻璃</h1>

        </div>

    </body>

    <script type="text/javascript">

    </script>

</html>

仅模糊的css（重点）:

毛玻璃.css

#main{

    backdrop-filter:blur(8px);

}

效果：

用firefox的注意了！

firefox70+的版本不支持 backdrop-filter 只支持 filter 了

根据实测效果没变化，但子元素(也就是里面的文字）也会模糊！！！

解决的方法还是有的：

https://www.cnblogs.com/arrayblog/p/14180549.html

css中的毛玻璃（不是透明度） 简单文档的更多相关文章

  1. 从多个XML文档中读取数据用于显示webapi帮助文档

    前言: 你先得知道HelpPageConfig文件,不知道说明你现在不需要这个,所以下文就不用看了,等知道了再看也不急.当然如果你很知道这个,下文也不用看了,因为你会了. 方法一: new XmlDo ...

  2. 老猿学5G扫盲贴：3GPP规范中与计费相关的主要规范文档列表及下载链接

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 在<老猿学5G扫盲贴:3GPP规范中部分与计 ...

  3. 在项目中利用TX Text Control进行WORD文档的编辑显示处理

    在很多文档管理的功能模块里面,我们往往需要对WORD稳定进行展示.编辑等处理,而如果使用微软word控件进行处理,需要安装WORD组件,而且接口使用也不见得简单易用,因此如果有第三方且不用安装Offi ...

  4. 使用.NET中的XML注释(二) -- 创建帮助文档入门篇

    一.摘要 在本系列的第一篇文章介绍了.NET中XML注释的用途, 本篇文章将讲解如何使用XML注释生成与MSDN一样的帮助文件.主要介绍NDoc的继承者:SandCastle. 二.背景 要生成帮助文 ...

  5. python中错误、调试、单元测试、文档测试

    错误分为程序的错误和由用户错误的输入引起的错误,此外还有因为各种各样意外的情况导致的错误,比如在磁盘满的时候写入.从网络爬取东西的时候,网络断了.这类错误称为异常 错误处理 普通的错误处理机制就是在出 ...

  6. C# : 操作Word文件的API - (将C# source中的xml注释转换成word文档)

    这篇博客将要讨论的是关于: 如何从C#的source以及注释, 生成一份Word格式的关于各个类,函数以及成员变量的说明文档. 他的大背景如下...... 最近的一个项目使用C#, 分N个模块, 在项 ...

  7. Unity3d 游戏中的实时降噪-对Square Enix文档的研究与实现

    看到SE的技术文档关于降噪的决定研究一下,本次试验场景: 文章中提到了3中主要滤波方法,最后一种方法又有三种方式分别为Conventional geometry-aware filtering,Dist ...

  8. PHP中利用DOM和simplxml读取xml文档

    实例  用DOM获取下列xml文档中所有金庸小说的书名,该xml文档所在位置为 ./books.xml: <?xml version="1.0" encoding=" ...

  9. spring boot 中使用swagger 来自动生成接口文档

    1.依赖包 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swa ...

随机推荐

  1. Django（31）模板中常用的过滤器

    模版常用过滤器 在模版中,有时候需要对一些数据进行处理以后才能使用.一般在Python中我们是通过函数的形式来完成的.而在模版中,则是通过过滤器来实现的.过滤器使用的是|来使用. add 将传进来的参 ...

  2. 前端必读：Vue响应式系统大PK（下）

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://www.sitepoint.com/vue-3-reactivity-system ...

  3. ocalhost kernel: [244840.301449] nf_conntrack: nf_conntrack: table full, dropping packet

    nf_conntrack: table full, dropping packet. 终结篇   "连接跟踪表已满,开始丢包"!相信不少用iptables的同学都会见过这个错误信息 ...

  4. 10.13 nc：多功能网络工具

    nc命令 是一个简单.可靠.强大的网络工具,它可以建立TCP连接,发送UDP数据包,监听任意的TCP和UDP端口,进行端口扫描,处理IPv4和IPv6数据包.     如果系统没有nc命令,那么可以手 ...

  5. 安装oracle 时“[INS-30014]无法检查指定的位置是否位于 CFS上”问题

    错误截图: 错误信息: [INS-30014]无法检查指定的位置是否位于 CFS上 解决方案: 通过修改hosts文件,向C:\Windows\System32\drivers\etc\hosts文件 ...

  6. 从实例分析ELF格式的.gnu.hash区与glibc的符号查找

    前言 ELF格式的.gnu.hash节在设计上比较复杂,直接从glibc源码进行分析的难度也比较大.今天静下心来看了这篇精彩的文章,终于将布隆滤波器.算数运算转为位运算等一系列细节搞懂了(值得一提的是 ...

  7. mybatis-plus还可以这样分表

    为什么要分表 Mysql是当前互联网系统中使用非常广泛的关系数据库,具有ACID的特性. 但是mysql的单表性能会受到表中数据量的限制,主要原因是B+树索引过大导致查询时索引无法全部加载到内存.读取 ...

  8. F5 api接口开发实战手册（二）

    F5 rest api 各对象使用方式详解 本篇文章介绍rest api接口下Collection.Resource.Subcollections.SubResource的各种使用方法.如果您不了解这 ...

  9. [leetcode] 36. 有效的数独(Java)

    没啥好说的,直接上就行 36. 有效的数独 class Solution { public boolean isValidSudoku(char[][] board) { Map<Charact ...

  10. Go语言web开发---Beego的session

    一.简介 Session是一段保存在服务器上的信息,当客户端第一次访问服务器时创建Session,同时也会创建一个名为beegosessionID,值为创建的Session的id的Cookie. 这个 ...