CSS如何将图像转换为模糊图像?
在CSS中,可以使用filter属性来模糊处理图像;filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。
语法:
filter: blur()
属性值:
● blur():给图像设置高斯模糊,值越大越模糊。如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。
示例1:使用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如何将图像转换为模糊图像?的更多相关文章
- 在C#中将图像转换为BASE64
本教程说明如何在C#.NET Windows Forms Application中将图像转换为base64字符串,以及将base64字符串转换为图像.您可以创建一个新的Windows窗体应用程序项目来 ...
- c语言实现BMP图像转换为灰度图
当初是自己要装X,非要用c来写信息隐藏作业,装了X,就得付出实践.查了好久资料,到期末才把作业交了,这里总结一下. 这道题是将真彩图转换为灰度图. 关于BMP文件结构,这是困扰了我好久的问题,上网查了 ...
- 在css中控制图像的大小
可在CSS中利用width属性和height属性控制一个图像得到大小,就像控制其他任何盒子的大小一样. <html> <head> <title>TODO supp ...
- 纯CSS实现3D图像轮转
CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先. 首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图 ...
- Python如何将RGB图像转换为Pytho灰度图像?
我正尝试使用matplotlib读取RGB图像并将其转换为灰度.在matlab中,我使用这个: 1 img = rgb2gray(imread('image.png')); 在matplotlib t ...
- 图像转换为二进制文件存入DSP6748
本文为原创作品,转载请注明出处 欢迎关注我的博客:http://blog.csdn.net/hit2015spring和http://www.cnblogs.com/xujianqing/ 这篇博客主 ...
- [C#编程参考]把图像转换为数组的两种实现
当一个程序和一个图片放在一起,无非有两种操作: 第一种,就是传输这个图片,在传输图片之前要首先把这个图片变成byte类型的数组.所以这时候我们用到的是图片的存储的数据,也就是图片属性中的大小.我们并不 ...
- 【CSS系列】图像映射
<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- 【Python开发】python PIL读取图像转换为灰度图及另存为其它格式(也可批量改格式)
例如有一幅图,文件名为"a.jpg'. 读取: from PIL import Image #或直接import Image im = Image.open('a.jpg') 将图片转换成 ...
随机推荐
- Java实现第十届蓝桥杯组队
试题 A: 组队 本题总分:5 分 [问题描述] 作为篮球队教练,你需要从以下名单中选出 1 号位至 5 号位各一名球员, 组成球队的首发阵容. 每位球员担任 1 号位至 5 号位时的评分如下表所示. ...
- java实现第七届蓝桥杯方格填数
方格填数 题目描述 如下的10个格子 +--+--+--+ | | | | +--+--+--+--+ | | | | | +--+--+--+--+ | | | | +--+--+--+ (如果显示 ...
- docker-compose mysql和node连接认证mongo问题
前言 最近,想部署一个自己的项目,鉴于自己的服务器是VPS(虚拟主机),配置也不够,就想到了用 docker 直接部署好了,这样既方便部署也方便不用的时候卸载或更新 然后本地搭建了环境,踩了一些坑,在 ...
- el-upload配合vue-cropper实现上传图片前裁剪
需求背景 上传一个封面图,在上传之前需要对图片进行裁剪,上传裁剪之后的图片,类似微信的上传头像. 技术方案 上传肯定是用element的 el-upload 组件实现上传,非常方便,各种钩子函数. 裁 ...
- ASP.NET Core通过Nacos SDK读取阿里云ACM
背景 前段时间,cranelee 在Github上给老黄提了个issues, 问到了如何用Nacos的SDK访问阿里云ACM. https://github.com/catcherwong/nacos ...
- [xDebug] PhpStorm Xdebug远程调试环境搭建
对于简单的工程,直接print_r();exit()已经足够,但是对于大型项目有时就有点力不从心.. 1,环境介绍 本地:windows10(192.168..)+ phpstorm8远程:Cento ...
- WPS2016ProPlus_normal 安装包+序列号
WPS OFFICE 2016 安装 链接:https://pan.baidu.com/s/1dfjNFDxcl1n2fvYTt9c86A 提取码: ij8e 下载解压:.txt是序列号,.exe是安 ...
- WINCC 应用与提高(78讲15.98G)视频教程网盘下载
收集与网络,供参考. https://blog.csdn.net/txwtech/article/details/94225748
- Beta冲刺<3/10>
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺--第三天(05.21) 作业正文 如下 其他参考文献 ... B ...
- #PHP 类的多继承实现之 traits.md
TRAIT PHP本身是并不支持多继承的,也就是,一个类只能继承一个类,为了满足业务需求,后来有了一些解决方法,例如,链式继承,B继承A,然后C继承B,这样,C就同时继承了AB, 此外还有接口,因为接 ...