先上效果图：

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

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

<!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. KingbaseES V8R6 运维案例 --ksql访问动态库问题

    KingbaseES V8R6数据库运维案例之---ksql访问动态库问题 案例说明: CentOS环境下,在安装和初始化数据库实例后,启动数据库服务,通过ksql连接访问时出现以下故障: 经检查,是 ...

  2. C#/.NET/.NET Core优秀项目和框架2024年3月简报

    前言 公众号每月定期推广和分享的C#/.NET/.NET Core优秀项目和框架(每周至少会推荐两个优秀的项目和框架当然节假日除外),公众号推文中有项目和框架的介绍.功能特点.使用方式以及部分功能截图 ...

  3. #单位根反演，二项式定理#LOJ 6485 LJJ 学二项式定理

    题目 \[\large\sum_{i=0}^nC(n,i)S^ia_{i\bmod 4} \] \(n\leq 10^{18},S,a\leq 10^8\) 分析 前面这一坨看起来就像是二项式定理,考 ...

  4. Bootstrap实战 - 评论列表

    一.介绍 社交媒体网站盛行,人们常常会使用评论表达自己的观点,评论功能已然成为网站的一部分. 二.知识点 2.1 媒体对象 官方解释:这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内 ...

  5. XML 简介及用法详解

    XML 是一种用于存储和传输数据的与软件和硬件无关的工具. 什么是XML? XML代表eXtensible Markup Language(可扩展标记语言).XML是一种与HTML非常相似的标记语言. ...

  6. SQL CREATE INDEX 语句- 提高数据库检索效率的关键步骤

    SQL CREATE INDEX 语句 SQL CREATE INDEX 语句用于在表中创建索引. 索引用于比其他方式更快地从数据库中检索数据.用户无法看到索引,它们只是用于加速搜索/查询. 注意: ...

  7. opengauss-jdbc问题整理

    opengauss-jdbc问题整理(更新中) 问题 1 jdbc 批量执行 insert 语句时返回结果不符合 Spring jpa 预期 问题描述: jdbc 执行查询时,可以使用prepares ...

  8. 前端与 HTML

    0x1 前端 什么是前端 解决图形用户界面(GUI)人机交互的问题 跨终端 PC/移动浏览器 客户端/小程序 VR/AR 等 Web 技术栈 一句话总结前端工程师的工作:使用 Web 技术栈解决多端 ...

  9. redis 简单整理——redis 的字符串基本结构和命令[二]

    前言 简单介绍一下redis的基本结构和命令. 正文 redis有5种基本结构: 字符串 哈希 列表 集合 有序集合 那么就来看下其基本命令吧. 通用命令键: keys * 查看全部键,一般不怎么用. ...

  10. windows server 出现.net 3.5安装不上去

    前言 有人说为什么到了现在还有人用.net 3.5呢?其实我也不用,主要是mmsql安装的时候要用到. 正文 一般我们不同电脑在程序和功能中添加,如果添加不上会弹出一个自动获取的一个过程,这时我们点击 ...