码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-08-10 15:44:10      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:nal   link   EAP   文字   cti   标准   融合   alt   opener   

一、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() 将高斯模糊应用于输出图片

标签:nal   link   EAP   文字   cti   标准   融合   alt   opener   

原文地址:https://www.cnblogs.com/tianma3798/p/11331759.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!