高斯滤镜模糊CSS3

http://www.cnblogs.com/fsjohnhuang/p/4127888.html#a3

高斯模糊让我想起忘了戴眼镜上街的情景*~*!

1. CSS3滤镜的实现

<style type="text/css">.blur{/** 格式，filer: blur(模糊半径) * 模糊半径，取值范围0~Npx，0为无效果 */ -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); } </style> <div class="blur" style="background:url(./mm.jpg)"></div>

2. IE5.5~9的实现

使用IE滤镜： filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); ,该方式在IE11中文档模式为5.5~9均起作用。

3. FF和IE10+的实现

　　使用SVG effect for HTML的方式：

　　 blur.svg:

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" baseProfile="full"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="10" /> </filter> </defs> <image xlink:href="./mm.jpg" x="0" y="0" height="200" width="200" filter="url(#blur)"/> </svg>

index.html(FF下)：

<style type="text/css">
.blur{filter: url(blur.svg#blur);
}
</style>
<div class="blur" style="background:url(./mm.jpg)"></div>

index.html(IE10+下，IE10+不支持直接在样式表对元素应用SVG滤镜)：

<style type="text/css">
.blur{background-iamge: url(blur.svg);
}
</style>
<div class="blur"></div>

使用Canvas作处理，高斯模糊的算法请参考：阮老师的“高斯模糊的算法”参考译文，处理库StackBlur.js。

处理库API： stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel );

sourceImageID表示要模糊的图片的id, 默认这个图片要隐藏；
targetCanvasID表示要显示模糊图片的canvas元素的id;
radius表示模糊的半径大小。不过，根据我的对比测试，radius好像与CSS中filter滤镜的模糊值不是1:1匹配的，反倒是有些类似2:1. 也就是这里的20px的半径模糊近似于CSS中blur滤镜值设置为10px;
blurAlphaChannel为布尔属性，表示aplha透明通道是否要模糊，true表示要模糊。

转载于:https://www.cnblogs.com/zhp404/articles/4168262.html

高斯滤镜模糊CSS3相关推荐

使用二维高斯函数模糊图片
这篇文章以通俗易懂的语言和方式解释了如何使用高斯函数模糊一张图片. 1.一维高斯函数: a表示得到曲线的高度,b是指曲线在x轴的中心,c指width(与半峰全宽有关),图形如下: 2.根据一维高斯函数 ...
使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
关于工具: 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rg ...
Python-opencv学习第二十九课：高斯双边模糊
Python-opencv学习第二十九课:高斯双边模糊文章目录 Python-opencv学习第二十九课:高斯双边模糊一.学习部分二.代码部分 1.引入库 2.读入数据 3.完整代码三.运行结 ...
OpenCV（C++版本）基础相关（7）：直方图均衡化、图像卷积操作、高斯模糊、高斯双边模糊、实时人脸检测案例
文章目录二十六.直方图均衡化 26.1 quickopencv.h 26.2 QuickDemo.cpp 26.3 test.cpp 二十七.图像卷积操作 27.1 quickopencv.h 27 ...
ps实例二：使用高斯滤镜制作图片阴影效果？
实例二:使用高斯滤镜制作图片阴影效果 1.ctrl+单击图层,选中图片选区: 2.在该图层下面,新建一图层: 3.填充灰色:alt+delete(如果快捷键不行,就用油漆桶填充也行) 4.ctrl+D ...
html页面字迹模糊,css3字体可以模糊吗？
css3可以让字体模糊吗?如何模糊字体?下面本篇文章给大家介绍一下使用CSS3模糊字体的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 我们可以使用CSS3 filter属性来 ...
手机html图片模糊,css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose...
最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都 ...
html 滤镜兼容,CSS3 中各种滤镜介绍和兼容性说明 - 文章教程
CSS3 的过滤器是一种相当有趣的分支,允许您修改的 HTML 元素和图像模糊.亮度和更大量.在这个快速教程中,我们就去了解他们是如何去工作. 它是如何工作只需使用 CSS,我们可以完成一些相当复杂 ...
高斯双边模糊_OpenCV 学习：９双边滤波bilateralFilter
1 什么是双边滤波? 双边滤波(Bilateral filter)是一种非线性的滤波方法,是结合图像的空间邻近度和像素值相似度的一种折衷处理,同时考虑空域信息和灰度相似性,达到保边去噪的目的.具有简单 ...

高斯滤镜模糊CSS3

高斯滤镜模糊CSS3相关推荐

最新文章

热门文章