先上效果图：

写博客不管是做笔记还是干啥，直接上源码不行么，还不放效果图，拆分成几段谁慢慢看，慢慢理解去

自己动手，丰衣足食，上代码：

<!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高斯背景模糊（毛玻璃，伪元素，完整实例）的更多相关文章

  1. css ::before和::after伪元素的用法

    css ::before和::after伪元素的用法:http://blog.dimpurr.com/css-before-after/

  2. CSS你所不知的伪元素的用法

    你所不知的 CSS ::before 和 ::after 伪元素用法 博客分类: Div / Css / XML / HTML5   CSS 有两个说不上常用的伪类 :before 和 :after, ...

  3. CSS——你所不知的 CSS ::before 和 ::after 伪元素用法（转）

    你所不知的 CSS ::before 和 ::after 伪元素用法 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前 ...

  4. W3School-CSS 伪元素 (Pseudo-elements) 实例

    CSS 伪元素 (Pseudo-elements)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin ...

  5. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  6. 你所不知的 CSS ::before 和 ::after 伪元素用法

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

  7. css before，after伪元素妙用

    我们知道,css伪元素包括after,before,first-letter等,通过合理的利用伪元素,我们可以让我们的结构更简洁. 通常写法如p::after{content:' '},其中conte ...

  8. CSS ::before 和 ::after 伪元素另类用法

    原文地址:http://justcoding.iteye.com/blog/2032627 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是 ...

  9. CSS before和after伪元素

    CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”.下面就说一下常见的两个伪元素before和 ...

  10. CSS ::before 和 ::after 伪元素用法

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

随机推荐

  1. tableau 工作表分页

    原创优阅达数据科技有限公司 https://mp.weixin.qq.com/s?__biz=MzA5MTU3NDI2NQ==&mid=2649465570&idx=1&sn= ...

  2. vue中elementui表格错位问题解决(一次到位)

    引入element-resize-detector 在项目引入插件(用来监听元素宽度变化) npm install element-resize-detector --save 在文件中引入(写在sc ...

  3. ARM之AXI总线协议初试

    AXI总线协议的学习 1.AXI总线的初步认识 What is AXI? AXI is part of ARM AMBA, a family of micro controller buses fir ...

  4. arch xfce启用自动挂载usb设备，自动访问usb设备，自动连接usb设备

    1.安装gvfs sudo pacman -S gvfs GVFS(Gnome Virtual File System)是一个用于 GNOME 桌面环境的虚拟文件系统,它提供了一种统一的方式来访问和管 ...

  5. #双指针#洛谷 7521 [省选联考 2021 B 卷] 取模

    题目传送门 分析 将 \(a\) 排序后从大到小枚举 \(a_k\),注意枚举的时候重复的只考虑一次,那么可以将其它数按照模 \(a_k\) 后排序, 答案只可能来自最大值与次大值之和取模或者之和最接 ...

  6. #搜索，容斥#洛谷 2567 [SCOI2010]幸运数字

    题目 问区间\([l,r],l,r\leq 10^{10}\)中有多少个数是 数位由6或8组成的数的倍数(包括本身) 分析 数位由6或8组成的数最多有两千多种, 这可以直接一遍暴搜得到 对于区间\([ ...

  7. #2-SAT，Tarjan，前缀优化建边#洛谷 6378 [PA2010]Riddle

    题目 \(n\) 个点 \(m\) 条边的无向图被分成 \(k\) 个部分.每个部分包含一些点. 请选择一些关键点,使得每个部分恰有一个关键点,且每条边至少有一个端点是关键点. 分析 每条边至少有一个 ...

  8. 浅谈OpenHarmony LiteOS-A内核之基础硬件——中断控制器GIC400

    一.前言 OpenAtom OpenHarmony(以下简称"OpenHarmony")采用多内核架构,支持Linux内核的标准系统.LiteOS-A的小型系统.LiteOS-M的 ...

  9. Go 语言之 Maps 详解：创建、遍历、操作和注意事项

    Maps 用于以键值对的形式存储数据值.Maps中的每个元素都是一个键值对.Maps是一个无序且可更改的集合,不允许重复.Maps的长度是其元素的数量.您可以使用 len() 函数来查找长度.Maps ...

  10. Centos环境部署SpringBoot项目

    centos JDK Jenkins maven tomcat git myslq nginx 7.9 11.0.19 2.418 3.8.1 9.0.78 2.34.4 5.7.26 1.24.0 ...