在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. Python Opencv-contrib Camshift&kalman卡尔曼滤波&CSRT算法 目标跟踪实现

    本次课题实现目标跟踪一共用到了三个算法,分别是Camshift.Kalman.CSRT,基于Python语言的Tkinter模块实现GUI与接口设计,项目一共包含三个文件: main.py: # co ...

  2. 学习nginx从入门到实践(四) 基础知识之nginx基本配置语法

    nginx基本配置语法 1.http相关 展示每次请求的请求头: curl -v http://www.baidu.com 2.nginx日志类型 error.log. access.log log_ ...

  3. SpringCloud Alibaba (一)：序言

    为什么要转用SpringCloud Alibaba? Spring Cloud Netflix项目进入维护模式 在2018年底时,Netflix宣布Hystrix进入维护模式.自2016年以来,Rib ...

  4. Bumped!【迪杰斯特拉消边、堆优化】

    Bumped! 题目链接(点击) Peter returned from the recently held ACM ICPC World Finals only to find that his r ...

  5. 微信小程序-Q爱天气

    最近找工作,发现微信小程序横行无忌,所以花两天时间把之前的一个天气小demo捡起来,重新上线发布一下.明天更新出小程序的讲解教程.

  6. 2019-02-07 selenium...

    今天是超级郁闷的一天 看教程 下了mysql-----配置-----不会----查资料------2小时后 mongodb-----配置------不会------查资料------1小时后 然后是各 ...

  7. pip速度过慢解决方法

    国内源: 新版ubuntu要求使用https源,要注意. 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.c ...

  8. 使用numpy生成二维正态分布

    参考资料: https://www.zhihu.com/question/39823283?sort=created https://www.zhihu.com/question/288946037/ ...

  9. cb35a_c++_STL_算法_for_each

    cb35a_c++_STL_算法_for_each for_each(b,e,p)使用for_each()算法遍历数据使用for_each()和函数对象修改数据使用for_each()的返回值 //转 ...

  10. cino伟斯 A770键盘界面快速设定记录后缀删除添加换行回车操作方法

    http://www.cinoscan.com/upload/2016063033256485.pdf cino A770键盘界面快速设定记录后缀删除添加换行回车操作方法