纯css高斯背景模糊（毛玻璃，伪元素，完整实例）
先上效果图：
写博客不管是做笔记还是干啥，直接上源码不行么，还不放效果图，拆分成几段谁慢慢看，慢慢理解去
自己动手，丰衣足食，上代码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>高斯背景模糊效果（毛玻璃）</title>
<style>
.box{
width: 750px;
height: 400px;
background: url('./img/timg.jpg') no-repeat 100% 100%;
background-size: cover;
position: relative;
}
.content{
height: 60%;
width: 60%;
background: white;
position: absolute;
left: 50%;
top: 50%;
margin-left: -30%;
margin-top: -16%;
border-radius: 4px;
}
/* filter是对该元素的模糊，因此对content添加并模糊伪元素，并定位到content的下层，而不是直接修改背景图或content的样式 */
.content::before{
content: '';
position: absolute;
top:0;right:0;bottom:0;left:0;
filter: blur(3px);
margin:-21px;
background: url('./img/timg.jpg') no-repeat 100% 100%;
background-size: cover;
opacity: .8;
}
.content p{
padding: 20px 15px;
color: white;
text-indent: 20px;
font-size: 14px;
line-height: 28px;
letter-spacing: 1px;
/* 清除子元素对父元素filter属性值的继承 */
filter: blur(0);
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<p>高斯模糊文字介绍的,高斯模糊文字介绍的高斯模糊,文字介绍的,高斯模糊文字介绍的高斯模糊。文字介绍的高斯模糊，文字介绍的--红叶都枫了红叶都枫了红叶都枫了@163</p>
</div>
</div>
</body>
</html>
下一篇可以在‘毛玻璃效果’的基础上做一些js的动态效果
纯css高斯背景模糊（毛玻璃，伪元素，完整实例）的更多相关文章
- css ::before和::after伪元素的用法
css ::before和::after伪元素的用法:http://blog.dimpurr.com/css-before-after/
- CSS你所不知的伪元素的用法
你所不知的 CSS ::before 和 ::after 伪元素用法 博客分类: Div / Css / XML / HTML5 CSS 有两个说不上常用的伪类 :before 和 :after, ...
- CSS——你所不知的 CSS ::before 和 ::after 伪元素用法（转）
你所不知的 CSS ::before 和 ::after 伪元素用法 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前 ...
- W3School-CSS 伪元素 (Pseudo-elements) 实例
CSS 伪元素 (Pseudo-elements)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- 你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...
- css before，after伪元素妙用
我们知道,css伪元素包括after,before,first-letter等,通过合理的利用伪元素,我们可以让我们的结构更简洁. 通常写法如p::after{content:' '},其中conte ...
- CSS ::before 和 ::after 伪元素另类用法
原文地址:http://justcoding.iteye.com/blog/2032627 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是 ...
- CSS before和after伪元素
CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”.下面就说一下常见的两个伪元素before和 ...
- CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...
随机推荐
- HDFS Short-Circuit Local Reads
目录 1.背景 2.配置 2.1 检测是否启用libhadoop.so 2.2 设置套接字路径 2.3 配置示例 2.4.1 /var/lib/hadoop-hdfs目录未创建 2.4.2 创建 /v ...
- C# 单例模式使用 Singleton
Singleton 类如下: public class Singleton<T> where T : class, new() { private static T _instance; ...
- 【环境配置】vscode配置C C++开发和调试环境
按照本教程配置好之后,不再需要写任何tasks.json和launch.json文件,减轻记忆负担,即使是调试程序,也不用再写这些文件了,跟着做就能得到一个很好的集成开发环境 目录 msys2的安装与 ...
- KingabseES-SQL优化_提升子查询
什么是提升子查询/子链接 SubLink,子查询/子链接,他们的区别:子查询不在表达式中子句,子链接在in/exists表达式中的子句. 若以范围表的方式存在,则是子查询: 若以表达式的存在,则是子连 ...
- Windows10系统重装教程
.
- 线段树（SegmentTree）
对于数组应用于区间染色实现为On,而线段树是O(logn) 什么是线段树:对于一个二叉树,每一个节点存储的是一个线段或是一个区间相应的信息. 查询 更新 #pragma once #include & ...
- OpenHarmony：4.0 Release版本的开发数据
OpenAtom OpenHarmony 4.0 Release版本于 10 月 27 日发布,经过了32周的开发周期.在此期间,有 65499 个 Committs 进入了 版本.在这个周期内完成了 ...
- BI 和报表有什么区别
BI 从早期提出的概念上来划分可以分为数据仓库.ETL.olap 和报表这几部分可以看到报表只是 BI 中的一个组成部分,只不过数据在 web 端展示时通常是通过报表形式,所以经常会把报表当做是 BI ...
- nginx重新整理——————http请求的11个阶段中的content阶段[十八]
前言 简单介绍一下content 阶段. 正文 下面介绍一下root和alias. 这个前面其实就提交过了,这里再说明一下. 功能都是一样的:将url映射为文件路径,以返回静态文件内容. 差别:roo ...
- 重新点亮shell————什么是shell[一]
前言 这里简介一下什么是shell. 写linux和shell 系列是为了后面的docker 系列的整理,本来想直接整理k8s的,但是呢,想想docker 系列整理完了的话,那么整理k8s系列就没有那 ...