先上效果图：

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

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

<!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. 聊一下Button事件、命令、行为的触发顺序

    1.我们新建一个xaml <StackPanel Width="200" Margin="20"> <Button Height=" ...

  2. Java程序连接KingbaseES 异常

    错误信息: --KStudio客户端工具错误信息 The conncetion attempt failed.Reason:connect time out --Java应用程序控制台日志 Cause ...

  3. KingbaseES 可更新的视图

    可更新视图 可简化视图可自动更新:系统将允许在视图上使用 INSERT.UPDATE 和 DELETE 语句,就像在常规表上一样.如果视图满足以下所有条件,就是可简化视图,则视图可自动更新: 该视图的 ...

  4. 17 JavaScript 中的call和apply

    17 JavaScript 中的call和apply 对于咱们逆向工程师而言. 并不需要深入的理解call和apply的本质作用. 只需要知道这玩意执行起来的逻辑顺序是什么即可 在运行时. 正常的js ...

  5. #K-D Tree#BZOJ 4303 数列

    题目传送门 分析 将 \((i,p_i)\) 视为一个点,那么相当于对横坐标或纵坐标对应的点区间乘.区间加或者区间求和, 把这些点丢到 K-D Tree 上,维护最小/大横/纵坐标,如果当前区间点在范 ...

  6. #线性基，差分，线段树#洛谷 5607 [Ynoi2013] 无力回天 NOI2017

    题目 分析 考虑区间修改比较难操作,将数组差分一下,转化成两次单点修改. 这样查询前缀的异或值就是该位置的异或值,线性基可以用线段树维护, 那么取出 \((l,r]\) 所在的线性基,再将 \(a[l ...

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

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

  8. 使用OHOS SDK构建libwebp

    参照OHOS IDE和SDK的安装方法配置好开发环境. 从github下载源码. 执行如下命令: git clone --depth=1 https://github.com/webmproject/ ...

  9. 配置java.library.path加载库文件

    前言:本文将告诉你Java加载dll或so库文件,配置 java.library.path路径 规避异常:java.lang.UnsatisfiedLinkError: no XXX in java. ...

  10. Django Admin：自动选择当前用户

    --转载自:林肯李 该文章写的很好,特转载留待后期备用 背景 在开发 CMS 时,经常需要标记谁创建了记录.Django 为我们提供了一个很好的管理界面.但是当我们只使用默认值时,用户需要自己选择他们 ...