web前端入门到实战：CSS Blur() 将高斯模糊应用于输出图片

最新推荐文章于 2023-03-08 13:09:18 发布

魔方编程

最新推荐文章于 2023-03-08 13:09:18 发布

阅读量603

点赞数

文章标签： css 前端 Web前端前端开发前端教程

本文链接：https://blog.csdn.net/wewfdf/article/details/100892986

版权

一、Css Blur()

blur() CSS 方法将高斯模糊应用于输出图片. 结果为 .

blur(radius)

radius模糊的半径，值为。它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。值为0会使输入保持不变。该值为空则为

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
blur(0)        /* No effect */
blur(8px)      /* Blur with 8px radius */
blur(1.17rem)  /* Blur with 1.17rem radius */

二、示例：

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
</style>
</head>

<body>
<p>图片使用高斯模糊效果:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>
</body>
</html>

魔方编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端入门到实战：CSS Blur() 将高斯模糊应用于输出图片

一、Css Blur()blur() CSS 方法将高斯模糊应用于输出图片. 结果为 .blur(radius)radius模糊的半径，值为。它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。值为0会使输入保持不变。该值为空则为web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学...
复制链接

扫一扫