其实毛玻璃很简单

只需要在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. java集合类介绍

    目录 集合类简介 List ArrayList LinkedList Vector Stack Set HashSet LinkedHashSet TreeSet Map HashMap Hashta ...

  2. Linux上使用iSCSI概述

    iSCSI简介 1. scsi和iscsi SCSI技术是存储设备最基本的标准协议,通常需要设备互相靠近并用SCSI总线连接,因此受到物理环境的限制 iSCSI(Internet Small Comp ...

  3. 057.Python前端Django模型ORM多表查询

    一 基于对象的查询 1.1 一对多查询 设计路由 from django.contrib import admin from django.urls import path from app01 im ...

  4. Scala 中为什么不建议用 return 关键字

    在scala中使用 return 的话,编译的时候会提示the latest statement is method is automatically returned, use of th retu ...

  5. MySQL8 配置远程连接

    引言 MySQL8 默认安装后只有本机能访问,如果需要远程连接 MySQL 将无法访问 查看 root 用户权限 进入 mysql 表 select user,host,plugin from use ...

  6. 启动kafaka失败了，提示zk保存kafka的ids已经在使用。

    FATAL [Kafka Server 1], Fatal error during KafkaServer startup. Prepare to shutdown (kafka.server.Ka ...

  7. 【ArcGIS遇上Python】ArcGIS Python批处理入门到精通实用教程目录

    目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介 Python语言是目前很火热的语言,极大的促进了人工智能发展.你知道在ArcGIS中也会有python的身影吗?事实上,在ArcG ...

  8. Navigation DialogFragment展示dialog

    如果按照一般fragment的写法: 在nav_config中 <fragment android:id="@+id/fragment_crime_detail" andro ...

  9. macOS Big Sur 11.4 (20F71) 正式版（DMG、ISO、IPSW），百度网盘下载

    本站提供的 macOS Big Sur 软件包,既可以拖拽到 Applications(应用程序)下直接安装,也可以制作启动 U 盘安装,或者在虚拟机中启动安装. 请访问原文链接:https://sy ...

  10. 让ThreadPoolExecutor的workQueue占满时自动阻塞submit()方法

    public class BlockingSubmitExecutor { private ExecutorService executor = new ThreadPoolExecutor(2, 2 ...