纯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 这个非常有意思 ...
随机推荐
- 动态水印也能去除？ProPainter一键视频抠图整合包下载
ProPainter是一个基于E2FGVI实现的AI视频编辑工具,它结合了增强的传播和Transformer机制,能够快速高效地进行视频修复和水印去除 功能特点 · 对象移除:智能地检测和移除视频中的 ...
- 用了两周开源堡垒机OneTerm，我有一些建议
上一篇文章分享了一款简洁且强大的开源堡垒机OneTerm,功能完善,代码简单,GO语言开发,用来学习很合适,拿来自用也没问题.堡垒机该有的核心功能基本都有了,方便与自有系统集成,我使用了两周,功能上没 ...
- 3D Object Detection Essay Reading 2024.03.27
Point Transformer V3: Simpler, Faster, Stronger publish:CVPR2024 paper:https://arxiv.org/abs/2312.10 ...
- 开源鸿蒙（OpenHarmonyOS）代码下载及编译
开源鸿蒙的代码仓在码云上,可以通过以下命令下载源码并编译 本机安装虚拟机 如本地已经安装可以忽略此步 安装指导:https://thoughts.teambition.com/share/614c49 ...
- HTTPS&SPDY&HTTP2&QUIC&HTTP3
HTTPS 密钥交换,加密和解密 SPDY&HTTP2 QUIC&HTTP3
- 链表队列（LinkedListQueue）
栈操作 入队 template<typename T> void LinkedListQueue<T>::enqueue(T e) { if (tail == nullptr) ...
- defer 延迟调用【GO 基础】
〇.前言 在 Go 语言中,defer 是一种用于延迟调用的关键字. defer 在 Go 语言中的地位非常重要,它是确保资源正确释放和程序健壮性的关键字. 本文将通过示例对其进行专门的详解. 一.d ...
- #对偶图最短路，网络流#洛谷 4001 [ICPC-Beijing 2006]狼抓兔子
题目 网格图最小割\((n,m\leq 1000)\) 分析 首先网络流可以过,但是由于无向图,所以残量网络容量也为\(w\),\(Dinic\)玄学AC,代码就不贴了 那有没有其它方法呢,网格图显然 ...
- k8s 深入篇———— docker 镜像是什么[二]
前言 简单介绍一下docker的镜像. 正文 前面讲到了容器的工作原理了(namespace 限制了时间, cgroup限制了资源),知道docker 历史的也知道,docker 之所以能够称为容器大 ...
- docker 应用篇————docker 自定义网络[十八]
前言 看下如何自定义网络. 正文 在了解自定义网络之前呢? 需要明白一件事. 就是其实我们在启动docker的时候是有默认参数的. docker run -d -p --name tomcat01 - ...