处理背景模糊化

在css中，可以利用filter属性和blur()函数实现高斯模糊效果，filter属性用于设置图片元素的可视效果，配合blur()函数使用可给图片元素添加高斯模糊效果，语法为“图片元素{filter:blur(模糊值);}”。

我们可以通过filter滤镜属性来给图片设置高斯模糊，filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

当属性值为blur(px)时，给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；

如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta Http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <style>

　　　　.img1 {

　　　　　　/* 重点设置下面两个属性 */

　　　　　　background-color: rgba(255, 255, 255, 0.3);

　　　　　　backdrop-filter: blur(10px);

　　　　　　-webkit-backdrop-filter: blur(5px);

　　　　　　filter: blur(5px);

　　　　}

　　</style>

　　<img src="https://www.lsjlt.com/skin/default/image/lazy.gif" class="lazy" data-original=""1118.02.png" class="img1">

　　<img src="1118.02.png"" class="img2">

</body>

</html>

输出结果：

css背景模糊化的更多相关文章

  1. CSS背景background、background-position使用详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  2. 你不知道的CSS背景—css背景属性全解

    CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...

  3. CSS背景background详解，background-position详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  4. CSS背景100%平铺 浏览器缩小背景显示不全解决办法

    本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...

  5. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  6. CSS背景样式

    CSS是级联样式表,用来表现HTML等文件样式的语言,CSS能够真正做到网页的表现与内容分离的设计语言,也就是说,做好了一款网页,可以通过另一个后缀名是css的文件进行修改其中的样式,不过在html的 ...

  7. CSS背景图拉伸自适应尺寸，全浏览器兼容

    突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...

  8. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  9. CSS 背景-CSS background

    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背 ...

  10. CSS背景属性

    CSS背景属性 1.background-attachment 属性 scroll:默认值.背景图像会随着页面其余部分的滚动而移动. fixed:当页面的其余部分滚动时,背景图像不会移动. inher ...

随机推荐

  1. STM32F1库函数初始化系列：串口DMA空闲接收_DMA发送

    1 void USART3_Configuration(void) //串口3配置---S 2 { 3 DMA_InitTypeDef DMA_InitStructure; 4 USART_InitT ...

  2. SpringCloud 小知识和历史

    六Spring Cloud 回顾之前的: javaSE 数据库 前端 Servlet HTTP Mybatis Spring SpringMVC SpringBoot Dubbo.Zookeeper. ...

  3. js获取浏览器宽度和高度值

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>请调整浏览器窗口</t ...

  4. Intellij IDEA 通过数据库表生成带注解的实体类Generate MyPOJOs.groovy脚本的编写

    //两段代码第一个是mybatis-plus的 第二个spring-jpa的,jpa的是我复制别人的,是本体,mybatis的是我改的//idea连接数据方法见 https://www.cnblogs ...

  5. yile接口

    后台接口: ---------------------------更改订单状态接口(需要主站长账号权限,主站要有接口权限)更改订单状态(可批量更新),如需退款/退单请用订单退款退单接口,如需更新订单数 ...

  6. Java内存分析利器——Eclipse Memory Analyzer工具的使用

    一.如何下载Java程序的dump内存文件并离线导入到MemoryAnalyser工具进行分析 1.jps查看Java应用的pid   jps 11584216168084 Launcher24792 ...

  7. 关于服务器上的XML

    服务器上的 XML XML 文件是类似 HTML 文件的纯文本文件. XML 能够通过标准的 Web 服务器轻松地存储和生成. 在服务器上存储 XML 文件 XML 文件在 Internet 服务器上 ...

  8. VMware-实用网站

    二进制包的获取方式 ftp://ftp.redhat.com推荐网站  www.rpmfind.net相应的官方网站http://www.mysql.com

  9. el-dialog 遮罩层覆盖内容的问题

    页面组件层级太多,就会出现遮罩层覆盖dialog里面内容的问题 解决:  :append-to-body="true" 把遮罩层添加到body上面    用z-index 设置没效 ...

  10. PV动态供给之nfs

    需求描述:利用nfs实现PV动态供给 前提:部署好nfs服务器  这里地址是 192.168.1.35  path: /ifs/k8s NFS:是一个主流的文件共享服务器. # yum install ...