css中的毛玻璃(不是透明度) 简单文档
其实毛玻璃很简单
只需要在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中的毛玻璃(不是透明度) 简单文档的更多相关文章
- 从多个XML文档中读取数据用于显示webapi帮助文档
前言: 你先得知道HelpPageConfig文件,不知道说明你现在不需要这个,所以下文就不用看了,等知道了再看也不急.当然如果你很知道这个,下文也不用看了,因为你会了. 方法一: new XmlDo ...
- 老猿学5G扫盲贴:3GPP规范中与计费相关的主要规范文档列表及下载链接
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 在<老猿学5G扫盲贴:3GPP规范中部分与计 ...
- 在项目中利用TX Text Control进行WORD文档的编辑显示处理
在很多文档管理的功能模块里面,我们往往需要对WORD稳定进行展示.编辑等处理,而如果使用微软word控件进行处理,需要安装WORD组件,而且接口使用也不见得简单易用,因此如果有第三方且不用安装Offi ...
- 使用.NET中的XML注释(二) -- 创建帮助文档入门篇
一.摘要 在本系列的第一篇文章介绍了.NET中XML注释的用途, 本篇文章将讲解如何使用XML注释生成与MSDN一样的帮助文件.主要介绍NDoc的继承者:SandCastle. 二.背景 要生成帮助文 ...
- python中错误、调试、单元测试、文档测试
错误分为程序的错误和由用户错误的输入引起的错误,此外还有因为各种各样意外的情况导致的错误,比如在磁盘满的时候写入.从网络爬取东西的时候,网络断了.这类错误称为异常 错误处理 普通的错误处理机制就是在出 ...
- C# : 操作Word文件的API - (将C# source中的xml注释转换成word文档)
这篇博客将要讨论的是关于: 如何从C#的source以及注释, 生成一份Word格式的关于各个类,函数以及成员变量的说明文档. 他的大背景如下...... 最近的一个项目使用C#, 分N个模块, 在项 ...
- Unity3d 游戏中的实时降噪-对Square Enix文档的研究与实现
看到SE的技术文档关于降噪的决定研究一下,本次试验场景: 文章中提到了3中主要滤波方法,最后一种方法又有三种方式分别为Conventional geometry-aware filtering,Dist ...
- PHP中利用DOM和simplxml读取xml文档
实例 用DOM获取下列xml文档中所有金庸小说的书名,该xml文档所在位置为 ./books.xml: <?xml version="1.0" encoding=" ...
- spring boot 中使用swagger 来自动生成接口文档
1.依赖包 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swa ...
随机推荐
- MSSQL·查询存储过程中的关键字
阅文时长 | 0.22分钟 字数统计 | 408字符 主要内容 | 1.引言&背景 2.声明与参考资料 『MSSQL·查询存储过程中的关键字』 编写人 | SCscHero 编写时间 | 20 ...
- 如何安装多个jdk并方便切换系统jdk版本
如何安装多个jdk并方便切换系统jdk版本 前言 在安装myeclipse时,压缩包中附带1.8.0的jdk,顺便安装并配置环境变量后发现系统默认的jdk变为了1.8.0.随后发现eclipse只支持 ...
- [bug] Maven每次都自动下载jar包非常慢
解决 方法一:将maven改为离线模式,自己下载jar包复制到仓库中 eclipse中Window>preferences>maven>勾选Offline 方法二:将maven镜像改 ...
- CentOS7安装vncserver(启动失败及连接黑屏解决办法)
CentOS7安装vncserver(启动失败及连接黑屏解决办法) 转载weixin_34167043 最后发布于2017-11-09 15:11:00 阅读数 42 收藏 展开 AutoSAR入门 ...
- MyBatis 各种参数传递方式
MyBatis参数传递方式 情况一:Mapper映射器接口方法参数只有一个且为基本类型 接口方法: public List<UserEntity> selectUserByAge(int ...
- K8s之二进制安装高可用集群
1.环境准备 #二进制部署安装文档# https://github.com/easzlab/kubeasz/blob/master/docs/setup/00-planning_and_overall ...
- 深入剖析 MySQL 自增锁
之前的文章把 InnoDB 中的所有的锁都介绍了一下,包括意向锁.记录锁...自增锁巴拉巴拉的.但是后面我自己回过头去看的时候发现,对自增锁的介绍居然才短短的一段. 其实自增锁(AUTO-INC Lo ...
- Mybatis3详解(十四)----Mybatis的分页
1.前言 在前面学习mybatis的时候,会经常对数据进行增删改查操作,使用最多的是对数据库进行查询操作,但是前面都是简单的案例,所以查询的数据量不是很大,自然查询时没有任何压力,但是如果在实际的项目 ...
- [leetcode] 46. 全排列(Java)
46. 全排列 这题我们可以借用31. 下一个排列写的nextPermutation函数来做,稍微改造一下即可 注意要先给nums排个序 class Solution { // 当没有下一个排列时re ...
- Linux系统挂载NFS文件系统
https://help.aliyun.com/document_detail/90529.html?spm=a2c4g.11186623.6.570.43212f30T5yM4w