在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实现第九届蓝桥杯等腰三角形

    等腰三角形 题目描述 本题目要求你在控制台输出一个由数字组成的等腰三角形. 具体的步骤是: 1. 先用1,2,3,...的自然数拼一个足够长的串 2. 用这个串填充三角形的三条边.从上方顶点开始,逆时 ...

  2. Pi-star MMDVM双工板介绍

    Pi-star MMDVM双工板介绍(2020/2) pi-star里控制模式选择:双工模式(DUPLEX Mode)/单工模式(SIMPLE Mode) 双工板工作频率范围:144-148,219- ...

  3. BFART算法

    参考:https://zhuanlan.zhihu.com/p/31498036 https://www.jianshu.com/p/83bb10ad1d32

  4. 源码分析（4）-ConcurrentHashMap（JDK1.8）

    一.UML类图 ConcurrentHashMap键值不能为null:底层数据结构是数组+链表/红黑二叉树:采用CAS(比较并交换)和synchronized来保证并发安全. CAS文章:https: ...

  5. 3.vue计算属性

    1.计算属性  再vue中如果出现表达式过长或者逻辑比较复杂,这时会导致代码不清晰,臃肿,难以维护所以我们会使用计算属性进行书写  再计算属性中可以放负责的逻辑,可以是函数,表达式等,但最终会返回一个 ...

  6. 浏览器端如何使用VConsole.js调试代码？

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. make & make install(make altinstall) 因动态库gcc版本问题

    cc1: error: unrecognized command line option “-flot” 解决方式是:找到 configure之后的Makefile, 删除 -flot 原因是gcc ...

  8. Vim配合Shell自动上传ftp

    shell代码: #!/bin/bash #网站配置 a1=('本地目录;主机;yonghuming;mima;远程目录' '本地目录;主机;user;pwd;远程目录') #选取的网站配置 web= ...

  9. [每日一题2020.06.11]Codeforces Round #644 (Div. 3) H

    A-E见 : 这里 题目 我觉得很有必要把H拿出来单独发( 其实是今天懒得写题了 ) problem H 一个从 1 到 $ 2^m - 1$ 的长度为m的连续二进制序列, 删去指定的n个数, 问剩余 ...

  10. 附024.Kubernetes_v1.18.3高可用部署架构二

    kubeadm介绍 kubeadm概述 参考<附003.Kubeadm部署Kubernetes>. kubeadm功能 参考<附003.Kubeadm部署Kubernetes> ...