使用 CSS 滤镜创建模糊的图片或文本

ID:13165 / 打印

使用 css 滤镜创建模糊的图片或文本

运动模糊用于创建具有方向和强度的模糊图片或文本。

此滤镜中可以使用以下参数

S.No

参数及说明

1

立即学习“前端免费学习笔记(深入)”;

添加

对或错。如果为 true,则将图像添加到模糊图像中;如果为 false,则图像不会添加到模糊图像中。

2

方向

模糊的方向,顺时针方向,四舍五入到 45 度增量。默认值为 270(左)。

0 = 顶部

45 = 右上

90 = 右

135 = 底部右

180 = 底部

225 = 左下

270 = 左

315 = 左上

3

强度

模糊将扩展的像素数。默认为 5 像素。

示例

您可以尝试运行以下代码进行模糊处理图像

现场演示

<html>    <head>    </head>    <body>       <img src = "/css/images/logo.png" alt="CSS Logo" style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">       <p>Text Example:</p>       <div style="width: 357;          height: 50;          font-size: 30pt;          font-family: Arial Black;          color: blue;          Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials</div>    </body> </html>
上一篇: 如何设置视口?
下一篇: 如何使用CSS设置段落第二行缩进?

作者:admin @ 24资源网   2024-10-18

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。