CSS Blur() 将高斯模糊应用于输出图片

Posted tianma3798

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS Blur() 将高斯模糊应用于输出图片相关的知识，希望对你有一定的参考价值。

一、Css  Blur()

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

blur(radius)

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

 

blur(0)        /* No effect */
blur(8px)      /* Blur with 8px radius */
blur(1.17rem)  /* Blur with 1.17rem radius */

 

二、使用示例：

filter: blur(0);

技术图片

filter: blur(4px);

技术图片

filter: blur(1.5rem);

技术图片

 

2.示例：

<!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>

技术图片

 

更多：

Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js

网页中实现图片的毛玻璃效果

Css3 文字渐变整理（一）

 

以上是关于CSS Blur() 将高斯模糊应用于输出图片的主要内容，如果未能解决你的问题，请参考以下文章

利用高斯算法实现图片模糊处理

backdrop-filter 和filter 写出高斯模糊效果 以及两者区别

css：使用filter和backdrop-filter实现高斯模糊效果

Atitit Gaussian Blur 高斯模糊 的原理and实现and 用途

移动端UI设计越来越流行的高斯模糊（Gaussian blur）和毛玻璃效果（磨砂效果），如何使用Android RenderScript简单实现？

一种高斯模糊渐变动画的实现－b