处理背景模糊化

在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. mybatis学习日记

    1.什么是框架 框架是软件开发中的一套解决方案,不同的框架解决不同的问题 2.三层架构 表现层:展示数据 业务层:处理业务需求 持久层:与数据库交互 3.持久层解决技术 JDBC技术(JDBC是一种规 ...

  2. ROS创建一个基本功能包

    1.mkdir catkin_ws/src 2.cd catkin_ws/src 3.catkin_init_workspace 4.cd ~/catkin_ws/ 5.catkin_make 6.在 ...

  3. 微信小程序分包

    当我们程序太大的时候,打开小程序就会比较慢,此处就需要用到分包加载,按照模块划分不同的包,让用户在需要的时候才加载对用的模块,也就是用户在进入某些页面的时候才下载该页面的资源,提高小程序的打开速度,以 ...

  4. vant组件，picker时间选择，自定义时间选择，实现datePacker，时间选择长期，增加长期选项，用于选择身份证到期时间等...

    vant组件,picker时间选择,自定义时间选择,实现datePacker,时间选择长期,增加长期选项,用于选择身份证到期时间等... 最近项目中有个需求,datePicker选项,需要实现增加一个 ...

  5. 如何基于IM即时通讯SDK从零开发仿微信聊天交友功能

    IM即时通讯技术的发展 IM即时通讯(Instant Messaging)是一种基于互联网的即时交流消息的业务. 实时聊天交互功能是市面上主流APP的重要功能之一,人们所熟悉的就是微信,QQ的聊天消息 ...

  6. 分析总结一下所有有关打印题目的套路和思路：pat乙级：1109 擅长C， 1008元素循环右移，1050 螺旋矩阵，1027 打印沙漏等等

    分析: 首先你要明白第一件事:所有要打印东西的题目打印都是从第一行到最后一行,从第一列到最后一列,你是没办法跳着打印的.可以看看其他几个打印题目1008元素循环右移,1050 螺旋矩阵1027 打印沙 ...

  7. 一键接入 ChatGPT，让你的QQ群变得热闹起来

    目录 项目效果 安装环境 配置文件 启动Mirai 启动ChatGPT 项目效果 ChatGPT 的出现对于人们的生活和工作都有着重要的影响,作为一个强大的自然语言处理模型,可以理解和生成自然语言,所 ...

  8. elasticsearch相关概念及常用操作汇总

    背景 我本来是想把我的写的es的平时总结dsl发出来的,但是我发现只搞那个意义大不.干脆多写点吧. 索引的结构化和非结构 我们经常用数据库,当然会经常用到索引. 然后从索引的维度去分析,系统分为结构化 ...

  9. 【2】java之object类

    一.Object 类的基本定义 ​ Object 类是所有类的父类,最大的一个好处就是:利用 Object 类可以接收所有类的对象(向上自动转型).如果不确定参数类型,使用 Object 类型是最好的 ...

  10. 17.SpringCloud Alibaba-OSS

    开通阿里云OSS https://www.aliyun.com/product/oss?spm=5176.19720258.J_3207526240.32.e93976f4xq6CZt 创建Bucke ...