先上效果图：

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

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

<!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. 冰河开始对Dubbo下手了！

    写在前面 对冰河有一定了解的读者都知道,冰河经历了一个高并发电商系统用户从零到上亿的整个研发过程,后期也由此衍生出电商系统(商城+秒杀)和基于海量数据的实时精准商品推荐平台.部分核心知识已总结到我出版 ...

  2. AXI4协议的物理模型

    AXI4的物理传输模型 1.AXI4的组成部分 首先说一下文章是学习<基于AXI4的IP核互联的设计与验证>莫锦辉的学习笔记.文中大部分的知识都是来源于这篇论文,这里学习以便理解AXI4协 ...

  3. #基数排序#CF1654F Minimal String Xoration

    题目传送门 分析 有没有一种办法可以将每个 \(j\) 的比较过程同时进行, 可以发现其实这个过程很像后缀排序,实际上只是加号变成了异或, 从低位到高位重新将字符串排名,用同样的方法做到 \(O(2^ ...

  4. #线段树#洛谷 4428 [BJOI2018]二进制

    题目 有一个长为 \(n\) 的二进制串,支持单个位置取反,对于这个二进制串的一个子区间, 求出其有多少位置不同的连续子串,满足在重新排列后(可包含前导0)是一个 3 的倍数. 分析 考虑对于单个位置 ...

  5. #排列组合，容斥#洛谷 5684 [CSPJX2019]非回文串

    题目 分析 那显然就是\(n!\)减去回文串的方案数 首先如果有超过一个出现奇数次字母那肯定不存在回文串 如果有且仅有一个首先要在次数中选择一个然后其它当偶数处理 偶数那就是首先字母位置选好但顺序可以 ...

  6. #高精度，模拟，vector#C 前缀

    From 2020牛客NOIP赛前集训营-提高组(第二场) 传送门 分析 像我这么菜就只会模拟呀(考场CE全部爆零QWQ) 题意就是不断跳到下一个字母问总共跳的长度有多长, 首先用一个变量存下初始位置 ...

  7. Python面试必备一之迭代器、生成器、浅拷贝、深拷贝

    本文首发于公众号:Hunter后端 原文链接:Python面试必备一之迭代器.生成器.浅拷贝.深拷贝 这一篇笔记主要介绍 Python 面试过程中常被问到的一些问题,比如: Python 中的迭代器和 ...

  8. ChatGPT商用网站源码+支持ai绘画(Midjourney)+GPT4.0+GPT3.5key绘画+Prompt角色+实时语音识别输入+后台一键版本更新！

    ChatGPT商用网站源码+支持ai绘画(Midjourney)+GPT4.0+GPT3.5key绘画+Prompt角色+实时语音识别输入+后台一键版本更新! 1.网站系统源码介绍: 程序已支持Cha ...

  9. java中的类型擦除type erasure

    目录 简介 举个例子 原因 解决办法 总结 简介 泛型是java从JDK 5开始引入的新特性,泛型的引入可以让我们在代码编译的时候就强制检查传入的类型,从而提升了程序的健壮度. 泛型可以用在类和接口上 ...

  10. OpenHarmony父子组件双项同步使用：@Link装饰器

      子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定. 说明: 从API version 9开始,该装饰器支持在ArkTS卡片中使用. 概述 @Link装饰的变量与其父组件中的数 ...