在CSS中，可以使用filter属性来模糊处理图像；filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。

语法：

filter: blur()

属性值：

●　blur()：给图像设置高斯模糊，值越大越模糊。如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

示例１：使用filter: blur()来模糊图像

原图：

<!DOCTYPE html>

<html>

	<head>

	   	<meta charset="UTF-8">

	   	<style>

            img {

                -webkit-filter: blur(4px);

                filter: blur(4px);

            }

            h1 {

                color:green;

            }

        </style>

	</head>

<body>

    <center>

        <img src= "1.jpg" width="500px" alt="filter applied" />

        </center>

    </body>

</html>

效果图

示例2：创建背景模糊图像

<!DOCTYPE html>

<html>

	<head>

	   	<meta charset="UTF-8">

	   	<style>

            img {

                -webkit-filter: blur(4px);

                filter: blur(4px);

                margin-top: 20px;

            }

            h1 {

                color:red;

            }

            .backgr-text {

                position: absolute;

                top: 20%;

                left: 50%;

                transform: translate(-50%, -50%);

                text-align: center;

            }

        </style>

	</head>

<body>

    <center>

        <img src= "1.jpg" width="500px" alt="filter applied" />

        <div>

                <h1>Hello World</h1>

                <h2>Blurred Background Image</h2>

            </div>

        </center>

    </body>

</html>

CSS如何将图像转换为模糊图像？的更多相关文章

  1. 在C＃中将图像转换为BASE64

    本教程说明如何在C#.NET Windows Forms Application中将图像转换为base64字符串,以及将base64字符串转换为图像.您可以创建一个新的Windows窗体应用程序项目来 ...

  2. c语言实现BMP图像转换为灰度图

    当初是自己要装X,非要用c来写信息隐藏作业,装了X,就得付出实践.查了好久资料,到期末才把作业交了,这里总结一下. 这道题是将真彩图转换为灰度图. 关于BMP文件结构,这是困扰了我好久的问题,上网查了 ...

  3. 在css中控制图像的大小

    可在CSS中利用width属性和height属性控制一个图像得到大小,就像控制其他任何盒子的大小一样. <html> <head> <title>TODO supp ...

  4. 纯CSS实现3D图像轮转

    CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先. 首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图 ...

  5. Python如何将RGB图像转换为Pytho灰度图像？

    我正尝试使用matplotlib读取RGB图像并将其转换为灰度.在matlab中,我使用这个: 1 img = rgb2gray(imread('image.png')); 在matplotlib t ...

  6. 图像转换为二进制文件存入DSP6748

    本文为原创作品,转载请注明出处 欢迎关注我的博客:http://blog.csdn.net/hit2015spring和http://www.cnblogs.com/xujianqing/ 这篇博客主 ...

  7. [C#编程参考]把图像转换为数组的两种实现

    当一个程序和一个图片放在一起,无非有两种操作: 第一种,就是传输这个图片,在传输图片之前要首先把这个图片变成byte类型的数组.所以这时候我们用到的是图片的存储的数据,也就是图片属性中的大小.我们并不 ...

  8. 【CSS系列】图像映射

    <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  9. 【Python开发】python PIL读取图像转换为灰度图及另存为其它格式（也可批量改格式）

    例如有一幅图,文件名为"a.jpg'.  读取: from PIL import Image #或直接import Image im = Image.open('a.jpg') 将图片转换成 ...

随机推荐

  1. UVIYN MMDVM充电宝支持APRS与 YSF

    需求就是要在APRS地图上显示对讲机位置 1.打开pi-star首页链接配置的专家(EXPERT)设置 下面链接快速打开 http://ip/admin/expert/edit_ysfgateway. ...

  2. Dedecms中{dede:type}标签支持调用父级栏目名称

    需求: 我们用{dede:type}标签调用栏目相关内容时,同时需要调用该栏目的父级栏目的名称. {dede:type}标签的代码做了一下开发,支持这个调用了. 开发方法: 1.打开include/t ...

  3. [AGC043-D]Merge Triplets

    题目   点这里看题目. 分析   我们不妨来考虑一下生成的序列有什么性质.   为了方便表示,我们将序列\(S\)的第\(i\)项写为\(S[i]\).   首先考虑如果所有的\(A\)序列都是递增 ...

  4. VMWare虚拟机开启时显示模块“Disk”启动失败的解决方案

    找到虚拟机所在的目录, 将 .vmx文件打开 将文件vmci0.present = "TRUE"改为 vmci0.present = "FALSE" 删除以.l ...

  5. VS Code项目中通过npm包的方式共享代码片段的方案实现

    VS Code项目中通过npm包的方式共享代码片段的方案实现 上周在 "VS Code项目中共享自定义的代码片段方案" 的文章中提到过一个共享代码片段的方案,上周经过调研后并没有发 ...

  6. MySQL的LIKE模糊查询优化

    原文链接:https://www.cnblogs.com/whyat/p/10512797.html %xxx%这种方式对于数据量少的时候,我们倒可以随意用,但是数据量大的时候,我们就体验到了查询性能 ...

  7. 基于JQuery的简单富文本编辑器

    利用jQuery实现最简单的编辑器 我试了很多种方法,目前最快捷能够实现及其简单的编辑可以使用 document.execCommand("ForeColor", "fa ...

  8. Python SimpleHTTPServer (python3 -m http.server 6789)

    搭建FTP,或者是搭建网络文件系统,这些方法都能够实现Linux的目录共享.但是FTP和网络文件系统的功能都过于强大,因此它们都有一些不够方便的地方.比如你想快速共享Linux系统的某个目录给整个项目 ...

  9. IntelliJ IDEA中项目import与open的区别

    场景: 从原来公司离职来到新的公司,接手公司项目,先将项目从git或svn项目版本管理上clone下来,如果项目原先是用Eclipse开发的,而你更习惯于使用IntelliJ IDEA,下面是针对使用 ...

  10. Flask框架基础功能

    引言 本文简单汇总Flask框架几大基础功能,包括: 路由系统 模板 数据库 几种常用Flask库 一个简单的Flask事例 Flask是一个基于Python,依赖Jinja2模板和WSGI服务的框架 ...