在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. Java实现填符号凑算式

    匪警请拨110,即使手机欠费也可拨通! 为了保障社会秩序,保护人民群众生命财产安全,警察叔叔需要与罪犯斗智斗勇,因而需要经常性地进行体力训练和智力训练! 某批警察叔叔正在进行智力训练: 1 2 3 4 ...

  2. Java实现花朵数

    一个N位的十进制正整数,如果它的每个位上的数字的N次方的和等于这个数本身,则称其为花朵数. 例如: 当N=3时,153就满足条件,因为 1^3 + 5^3 + 3^3 = 153,这样的数字也被称为水 ...

  3. 一张图说清楚Flink水印和Lateness

    真传一句话,假言万卷书. Flink使用窗口与水印处理乱序问题,使用Latenss处理延迟问题,二者混合使用可以满足很多复杂场景的需求 当Watermark大于窗口结束时间时,会触发窗口内的元素进行计 ...

  4. python—列表,元组，字典

    ——列表:(中括号括起来:逗号分隔每个元素:列表中的元素可以是数字,字符串,列表,布尔值等等) (列表元素可以被修改)  list(类)    (有序的) [1]索引取值:切片取值:for循环:whi ...

  5. Flask g 对象

    1.什么是g对象? 在 flask 中,有一个专门用来存储用户信息的 g 对象,g的全称的为global. g 对象在一次请求中的所有的代码的地方,都是可以使用的. 赋值方式 from flask i ...

  6. 一张图搞懂Ubuntu安装时姓名、计算机名、用户名

    安装Ubuntu时会要求填写如下图的信息: 感谢:苏守坤 注意:上面的博客讲述了各自的具体含义,本篇博客只是说明这些名称在系统安装后会出现的位置.

  7. Shell编译安装nginx

    环境及规划 [root@nginx-node01 ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) ID 主机名 ip ...

  8. pycharm安装破解方法

    1.pycharm专业版官方下载链接:http://www.jetbrains.com/pycharm/download/#section=windows正常下载并安装 2.从https://gith ...

  9. 基础拾遗---委托，匿名函数，lambda

    前言: C# 中的委托(Delegate)类似于 C 或 C++ 中函数的指针.委托是存有对某个方法的引用的一种引用类型变量.引用可在运行时被改变.委托(Delegate)特别用于实现事件和回调方法. ...

  10. MySQL-数据库和表的基本操作

    数据库和表的基本操作 数据库基础知识 创建数据库 CREATE DATABASE 数据库名称 ; 查看数据库(显示数据库名列表) SHOW DATABASES ; 查看某数据库信息(显示创建的信息) ...