如何实现半透明为什么叫高斯模糊糊
点击联系发帖人
时间：2015-12-15 10:04
一、前言 &&
& IE特有的滤镜常常作为CSS3各种新特性的降级处理补充，而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性，因此当前仅Webkit内核的浏览器支持CSS3 Filter，而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了，而IE5.5~9则使用IE滤镜、JS+DIV或VML处理！本篇为先占个坑，以后慢慢填^_^！！！
& CSS3 Filter兼容性表
& SVG effect for HTML兼容性表
& 下文将探讨以下滤镜！
& & & & & & & & &
& 先P张原图作参考系（清纯MM哦！！） &
二、Speia滤镜(Speia)
& Speia滤镜是对图片或元素整体进行棕褐色处理，就是老照片那种效果。下面直接看疗效！
& &看，岁月的痕迹啊，是不是有妈妈年代的感觉呢？！
& &1. CSS3滤镜实现
&style type="text/css"&
格式，filer: sepia(效果范围)
效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
-webkit-filter: sepia(100%);
-moz-filter:sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);
&div class="sepia" style="background:url(./mm.jpg)"&&/div&
& &2. IE5.5~9特的处理方式（待研究）
& & & 尝试过IE滤镜&filter:progid:XDImageTransform.Microsoft.MaskFilter(color=颜色)&，仅仅能使用gif图片（其他格式的图片将导致整个元素消失不见），而且遮罩层与图片重合的部分将变为空白一片，另外在IE11浏览器文档模式为5.5~9下滤镜均失效（元素按照没有设置滤镜的方式被渲染显示）。结论：IE滤镜无法处理Sepia效果。
& & & 而通过js填坑方面，想法1：在元素表面附加一层半透明棕褐色的遮罩层，但效果与CSS3 Filter相距甚远，失败告终。。。。。。。
& &3. FF和IE10+的处理方式
& & & 可使用Canvas作处理，下面是简单实现的代码，目标元素&&img id="sepia" src="./mm.jpg"/&&
// 定义处理方法
var sepia = function(el){
var canvas = document.createElement('canvas');
var w = canvas.width = el.offsetWidth,
h = canvas.height = el.offsetH
var ctx = canvas.getContext('2d');
ctx.drawImage(el, 0, 0);
// 对像素作处理
var imgData = ctx.getImageData(0, 0, w, h), d = imgData.
for (int i = 0, len = d. i & i+=4){
var r = d[i],
g = d[i+1],
b = d[i+2];
d[i] = (r * 0.393)+(g * 0.769)+(b * 0.189);
d[i+1] = (r * 0.349)+(g * 0.686)+(b * 0.168);
d[i+2] = (r * 0.272)+(g * 0.534)+(b * 0.131);
ctx.putImageData(imgData, 0, 0);
var img = new Image();
img.src = ctx.toDataURL("image/*");
var img = sepia(document.getElementById('sepia'));
document.body.appendChild(img);
三、灰度图滤镜(Grayscale)
& 灰度图艺术范！
& 1. CSS3滤镜的实现
&style type="text/css"&
.grayscale{
格式，filer: grayscale(效果范围)
效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
-webkit-filter: grayscale(100%);
-o-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
&div class="grayscale" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现
& & &使用IE滤镜：&filter:&
& 3. FF和IE10+的处理方式
& & & 使用SVG effect for HTML的方式：
&grayscale.svg:
&svg xmlns="http://www.w3.org/2000/svg"&
&filter id="grayscale"&
&feColorMatrix type="matrix" values="0.3 0. 0.3 0. 0.3 0. 0 0 0 1 0"/&
& & & & index.html:
&style type="text/css"&
.grayscale{
filter:url(./grayscale.svg#grayscale);
&div class="grayscale" style="background:url(./mm.jpg)"&&/div&
& & &可使用Canvas作处理，下面是简单实现的代码，目标元素&&img id="grayscale"&src="./mm.jpg"/&&
var grayscale = function(el){
var canvas = document.createElement('canvas');
var w = canvas.width = el.offsetWidth,
h = canvas.height = el.offsetH
var ctx = canvas.getContext('2d');
ctx.drawImage(el, 0, 0);
// 对像素作处理
var imgData = ctx.getImageData(0, 0, w, h), d = imgData.
for (int i = 0, len = d. i & i+=4){
var r = d[i],
g = d[i+1],
b = d[i+2];
d[i] = d[i+1] = d[i+2] = (r+g+b)/3;
ctx.putImageData(imgData, 0, 0);
var img = new Image();
img.src = ctx.toDataURL("image/*");
var img = grayscale(document.getElementById('grayscale'));
document.body.appendChild(img);
四、高斯模糊滤镜(Blur)
& &高斯模糊让我想起忘了戴眼镜上街的情景*~*!
& 1. CSS3滤镜的实现
&style type="text/css"&
格式，filer: blur(模糊半径)
模糊半径，取值范围0~Npx，0为无效果
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
&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"&
&filter id="blur"&
&feGaussianBlur stdDeviation="10" /&
&image xlink:href="./mm.jpg" x="0" y="0" height="200" width="200" filter="url(#blur)"/&
& & & & & & index.html(FF下)：
&style type="text/css"&
filter: url(blur.svg#blur);
&div class="blur" style="background:url(./mm.jpg)"&&/div&
& & & & & &index.html(IE10+下，IE10+不支持直接在样式表对元素应用SVG滤镜)：
&style type="text/css"&
background-iamge: url(blur.svg);
&div class="blur"&&/div&
& &&使用Canvas作处理，高斯模糊的算法请参考：阮老师的&&参考译文，处理库。
& & 处理库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表示要模糊。
五、反色滤镜(Inver)
& 经历过胶圈年代的同学都熟悉哦！
&&1. CSS3滤镜的实现
&style type="text/css"&
格式，filer: invert(效果范围)
效果范围，取值范围0~1或0~100%，0为无效果，1或100%表示最大效果
-webkit-filter: invert(1);
-moz-filter: invert(1);
-o-filter: invert(1);
-ms-filter: invert(1);
filter: invert(1);
&div class="invert" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现（待研究）
&&3. FF和IE10+的实现&
& & & & &&可使用Canvas作处理，下面是简单实现的代码，目标元素&&img id="invert"&src="./mm.jpg"/&&
var invert = function(el){
var canvas = document.createElement('canvas');
var w = canvas.width = el.offsetWidth,
h = canvas.height = el.offsetH
var ctx = canvas.getContext('2d');
ctx.drawImage(el, 0, 0);
// 对像素作处理
var imgData = ctx.getImageData(0, 0, w, h), d = imgData.
for (int i = 0, len = d. i & i+=4){
var r = d[i],
g = d[i+1],
b = d[i+2];
d[i] = 255 -
d[i+1] = 255 -
d[i+2] = 255 -
ctx.putImageData(imgData, 0, 0);
var img = new Image();
img.src = ctx.toDataURL("image/*");
var img = invert(document.getElementById('invert'));
document.body.appendChild(img);
六、饱和度滤镜(Saturate)
& 暖暖的赶脚~~~！
& 1. CSS3滤镜的实现
&style type="text/css"&
.saturate{
格式，filer: saturate(效果范围)
效果范围，取值范围&=0的数字或百分数，1为无效果，0为灰度图
-webkit-filter: saturate(2);
-moz-filter: saturate(2);
-o-filter: saturate(2);
-ms-filter: saturate(2);
filter: saturate(2);
&div class="saturate" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现（待研究）
&&3. FF和IE10+的实现&（待研究）
七、对比度滤镜(Contrast) &
& 1. CSS3滤镜的实现
&style type="text/css"&
.contrast{
格式，filer: contrast(效果范围)
效果范围，取值范围&=0的数字或百分数，1为无效果
-webkit-filter: contrast(2);
-moz-filter: contrast(2);
-o-filter: contrast(2);
-ms-filter: contrast(2);
filter: contrast(2);
&div class="contrast" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现（待研究）
&&3. FF和IE10+的实现&（待研究）
八、亮度滤镜(Brightness)
& &曝光过度哦！
& 1. CSS3滤镜的实现
&style type="text/css"&
.brightness{
格式，filer: brightness(效果范围)
效果范围，取值范围&=0的数字或百分数，1为无效果
-webkit-filter: brightness(2);
-moz-filter: brightness(2);
-o-filter: brightness(2);
-ms-filter: brightness(2);
filter: brightness(2);
&div class="brightness" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现（待研究）
&&3. FF和IE10+的实现&
&可使用Canvas作处理，下面是简单实现的代码，目标元素&&img id="brightness"&src="./mm.jpg"/&&
// 原理：让图像变得更亮或更暗，算法将红色通道、绿色通道、蓝色通道，同时加上一个正值或负值。
var brightness = function(el, delta){
var canvas = document.createElement('canvas');
var w = canvas.width = el.offsetWidth,
h = canvas.height = el.offsetH
var ctx = canvas.getContext('2d');
ctx.drawImage(el, 0, 0);
// 对像素作处理
var imgData = ctx.getImageData(0, 0, w, h), d = imgData.
for (int i = 0, len = d. i & i+=4){
var r = d[i],
g = d[i+1],
b = d[i+2];
d[i] = r +
d[i+1] = g +
d[i+2] = b +
ctx.putImageData(imgData, 0, 0);
var img = new Image();
img.src = ctx.toDataURL("image/*");
var img = brightness(document.getElementById('brightness', 10));
document.body.appendChild(img);
九、色相旋转滤镜(Hue Rotate)
& 诡异的赶脚~~
&1. CSS3滤镜的实现
&style type="text/css"&
.hue-rotate{
格式，filer: hue-rotate(效果范围)
效果范围，取值范0deg~365deg，0（默认值）为无效果
-webkit-filter: hue-rotate(200deg);
-moz-filter: hue-rotate(200deg);
-o-filter: hue-rotate(200deg);
-ms-filter: hue-rotate(200deg);
filter: hue-rotate(200deg);
&div class="hue-rotate" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现（待研究）
&&3. FF和IE10+的实现&（待研究）
十、阴影滤镜(Drop Shadow) &
& &增加立体感！
&1. CSS3滤镜的实现
&style type="text/css"&
.drop-shadow{
格式，filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)
x-offset和y-offset为阴影的相对于元素左上角的位移距离；
1. 阴影的外观受border-radius样式的影响；
2. :after和:before等伪元素会继承阴影的效果。
-webkit-filter: drop-shadow(5px 5px 0px #333);
-moz-filter: drop-shadow(5px 5px 0px #333);
-o-filter: drop-shadow(5px 5px 0px #333);
-ms-filter: drop-shadow(5px 5px 0px #333);
filter: drop-shadow(5px 5px 0px #333);
border: solid 10px #e00;
-webkit-border-radius: 10
&div class="drop-shadow" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现
& & & 在真实的IE5.5~9下可使用IE滤镜（IE10+中文档模式为5.5~9则下列的IE滤镜无效）：
* color为阴影颜色，形如"#ff00cc"
* direction为角度，取值范围0,45,90,135,180,225,270,315
filter:Shadow(Color=color,Direction=direction);
* color为阴影颜色，形如"#ff00cc"
* offx为水平偏移量
* offy为垂直偏移量
* positive为1或0
filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive);
& & & &IE10+中文档模式为5.5~9时，则需要DIV+JS处理了。其中有一个jQuery插件：http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js
&&3. FF和IE10+的实现&
& & & 通过CSS3新特新Box-Shadow处理，&box-shadow: 投影方式(inset) X轴偏移量(x-offset) Y轴偏移量(y-offset) 阴影模糊半径(blur-radius) 阴影扩展半径(spread-radius) 阴影颜色(color)&。
& & &&&投影方式(inset)&，可选属性（默认为外阴影），设置为inset时表示内阴影。
& & &&&X轴偏移量(x-offset)&，正值表示阴影位于对象的右边，负值表示阴影位于对象的左边。
& & &&&Y轴偏移量(y-offset)&，正值表示阴影位于对象的底部，负值表示阴影位于对象的顶部。
& & &&&阴影模糊半径(blur-radius)&，可选属性（默认为0，没有模糊效果），值范围&=0。
& & &&&阴影扩展半径(spread-radius)&，可选属性，正值表示阴影扩展，负值表示阴影缩小。
& & &&&颜色(color)&，可选属性(默认值又浏览器决定, Webkit内核的为透明)。
& & & &注意：
1.&投影的外观受到border-radius样式的影响；
& & & & & & 2.&:after和:before等伪元素不继承投影的效果。
十一、总结
& & 上述内容仅仅对CSS3滤镜和FF、IE下的替代方案作简单的介绍，如有纰漏请各位指正，谢谢！
& & &尊重原创，转载请注明来自：& ^_^肥仔John
十二、参考
http://blog.csdn.net/hfahe/article/details/7104496
/html/News/793.html
/tech//69684.html
http://blog.csdn.net/lujunql/article/details/6260643
/shiyangxt/archive//1334633.html
/cn/devnet/html5/articles/css3-basics.html
/jianzhan/630820.html
/blog/qianduan/226.html
/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE%E7%89%87%E8%BD%AC%E6%8D%A2%E6%88%90%E6%A8%A1%E7%B3%8A%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/
(applying-svg-effects-to-html-content)&&http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html
/archives/829
.cn/tags/canvas_getimagedata.asp
/convert-canvas-image
阅读(...) 评论()高斯模糊半透明质感的UI设计作品欣赏随着科技的发展，半透明的电子产品（如：手机、显示屏等）在不久的将来将会普及，半透明的东西看起来非常美丽有新鲜感，实物现在我们还不能体验，但是我们可以先从一些UI设计上感受下也不错！ 今天设计达人网整理高斯模糊半透明质感的UI设计作品，大部分来自dribbble优秀设计站，有些作品可能只是..
此经验为精品经验，需要进行验证才能阅读：
相关经验教程
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益}
& IE特有的滤镜常常作为CSS3各种新特性的降级处理补充，而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性，因此当前仅Webkit内核的浏览器支持CSS3 Filter，而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了，而IE5.5~9则使用IE滤镜、JS+DIV或VML处理！本篇为先占个坑，以后慢慢填^_^！！！
& CSS3 Filter兼容性表
& SVG effect for HTML兼容性表
& 下文将探讨以下滤镜！
& & & & & & & & &
& 先P张原图作参考系（清纯MM哦！！） &
二、Speia滤镜(Speia)
& Speia滤镜是对图片或元素整体进行棕褐色处理，就是老照片那种效果。下面直接看疗效！
& &看，岁月的痕迹啊，是不是有妈妈年代的感觉呢？！
& &1. CSS3滤镜实现
&style type="text/css"&
格式，filer: sepia(效果范围)
效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
-webkit-filter: sepia(100%);
-moz-filter:sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);
&div class="sepia" style="background:url(./mm.jpg)"&&/div&
& &2. IE5.5~9特的处理方式（待研究）
& & & 尝试过IE滤镜&filter:progid:XDImageTransform.Microsoft.MaskFilter(color=颜色)&，仅仅能使用gif图片（其他格式的图片将导致整个元素消失不见），而且遮罩层与图片重合的部分将变为空白一片，另外在IE11浏览器文档模式为5.5~9下滤镜均失效（元素按照没有设置滤镜的方式被渲染显示）。结论：IE滤镜无法处理Sepia效果。
& & & 而通过js填坑方面，想法1：在元素表面附加一层半透明棕褐色的遮罩层，但效果与CSS3 Filter相距甚远，失败告终。。。。。。。
& &3. FF和IE10+的处理方式
& & & 可使用Canvas作处理，下面是简单实现的代码，目标元素&&img id="sepia" src="./mm.jpg"/&&
// 定义处理方法
var sepia = function(el){
var canvas = document.createElement('canvas');
var w = canvas.width = el.offsetWidth,
h = canvas.height = el.offsetH
var ctx = canvas.getContext('2d');
ctx.drawImage(el, 0, 0);
// 对像素作处理
var imgData = ctx.getImageData(0, 0, w, h), d = imgData.
for (int i = 0, len = d. i & i+=4){
var r = d[i],
g = d[i+1],
b = d[i+2];
d[i] = (r * 0.393)+(g * 0.769)+(b * 0.189);
d[i+1] = (r * 0.349)+(g * 0.686)+(b * 0.168);
d[i+2] = (r * 0.272)+(g * 0.534)+(b * 0.131);
ctx.putImageData(imgData, 0, 0);
var img = new Image();
img.src = ctx.toDataURL("image/*");
var img = sepia(document.getElementById('sepia'));
document.body.appendChild(img);
三、灰度图滤镜(Grayscale)
& 灰度图艺术范！
& 1. CSS3滤镜的实现
&style type="text/css"&
.grayscale{
格式，filer: grayscale(效果范围)
效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
-webkit-filter: grayscale(100%);
-o-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
&div class="grayscale" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现
& & &使用IE滤镜：&filter:&
& 3. FF和IE10+的处理方式
& & & 使用SVG effect for HTML的方式：
&grayscale.svg:
&svg xmlns="http://www.w3.org/2000/svg"&
&filter id="grayscale"&
&feColorMatrix type="matrix" values="0.3 0. 0.3 0. 0.3 0. 0 0 0 1 0"/&
& & & & index.html:
&style type="text/css"&
.grayscale{
filter:url(./grayscale.svg#grayscale);
&div class="grayscale" style="background:url(./mm.jpg)"&&/div&
& & &可使用Canvas作处理，下面是简单实现的代码，目标元素&&img id="grayscale"&src="./mm.jpg"/&&
var grayscale = function(el){
var canvas = document.createElement('canvas');
var w = canvas.width = el.offsetWidth,
h = canvas.height = el.offsetH
var ctx = canvas.getContext('2d');
ctx.drawImage(el, 0, 0);
// 对像素作处理
var imgData = ctx.getImageData(0, 0, w, h), d = imgData.
for (int i = 0, len = d. i & i+=4){
var r = d[i],
g = d[i+1],
b = d[i+2];
d[i] = d[i+1] = d[i+2] = (r+g+b)/3;
ctx.putImageData(imgData, 0, 0);
var img = new Image();
img.src = ctx.toDataURL("image/*");
var img = grayscale(document.getElementById('grayscale'));
document.body.appendChild(img);
四、高斯模糊滤镜(Blur)
& &高斯模糊让我想起忘了戴眼镜上街的情景*~*!
& 1. CSS3滤镜的实现
&style type="text/css"&
格式，filer: blur(模糊半径)
模糊半径，取值范围0~Npx，0为无效果
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
&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"&
&filter id="blur"&
&feGaussianBlur stdDeviation="10" /&
&image xlink:href="./mm.jpg" x="0" y="0" height="200" width="200" filter="url(#blur)"/&
& & & & & & index.html(FF下)：
&style type="text/css"&
filter: url(blur.svg#blur);
&div class="blur" style="background:url(./mm.jpg)"&&/div&
& & & & & &index.html(IE10+下，IE10+不支持直接在样式表对元素应用SVG滤镜)：
&style type="text/css"&
background-iamge: url(blur.svg);
&div class="blur"&&/div&
& &&使用Canvas作处理，高斯模糊的算法请参考：阮老师的&&参考译文，处理库。
& & 处理库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表示要模糊。
五、反色滤镜(Inver)
& 经历过胶圈年代的同学都熟悉哦！
&&1. CSS3滤镜的实现
&style type="text/css"&
格式，filer: invert(效果范围)
效果范围，取值范围0~1或0~100%，0为无效果，1或100%表示最大效果
-webkit-filter: invert(1);
-moz-filter: invert(1);
-o-filter: invert(1);
-ms-filter: invert(1);
filter: invert(1);
&div class="invert" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现（待研究）
&&3. FF和IE10+的实现&
& & & & &&可使用Canvas作处理，下面是简单实现的代码，目标元素&&img id="invert"&src="./mm.jpg"/&&
var invert = function(el){
var canvas = document.createElement('canvas');
var w = canvas.width = el.offsetWidth,
h = canvas.height = el.offsetH
var ctx = canvas.getContext('2d');
ctx.drawImage(el, 0, 0);
// 对像素作处理
var imgData = ctx.getImageData(0, 0, w, h), d = imgData.
for (int i = 0, len = d. i & i+=4){
var r = d[i],
g = d[i+1],
b = d[i+2];
d[i] = 255 -
d[i+1] = 255 -
d[i+2] = 255 -
ctx.putImageData(imgData, 0, 0);
var img = new Image();
img.src = ctx.toDataURL("image/*");
var img = invert(document.getElementById('invert'));
document.body.appendChild(img);
六、饱和度滤镜(Saturate)
& 暖暖的赶脚~~~！
& 1. CSS3滤镜的实现
&style type="text/css"&
.saturate{
格式，filer: saturate(效果范围)
效果范围，取值范围&=0的数字或百分数，1为无效果，0为灰度图
-webkit-filter: saturate(2);
-moz-filter: saturate(2);
-o-filter: saturate(2);
-ms-filter: saturate(2);
filter: saturate(2);
&div class="saturate" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现（待研究）
&&3. FF和IE10+的实现&（待研究）
七、对比度滤镜(Contrast) &
& 1. CSS3滤镜的实现
&style type="text/css"&
.contrast{
格式，filer: contrast(效果范围)
效果范围，取值范围&=0的数字或百分数，1为无效果
-webkit-filter: contrast(2);
-moz-filter: contrast(2);
-o-filter: contrast(2);
-ms-filter: contrast(2);
filter: contrast(2);
&div class="contrast" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现（待研究）
&&3. FF和IE10+的实现&（待研究）
八、亮度滤镜(Brightness)
& &曝光过度哦！
& 1. CSS3滤镜的实现
&style type="text/css"&
.brightness{
格式，filer: brightness(效果范围)
效果范围，取值范围&=0的数字或百分数，1为无效果
-webkit-filter: brightness(2);
-moz-filter: brightness(2);
-o-filter: brightness(2);
-ms-filter: brightness(2);
filter: brightness(2);
&div class="brightness" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现（待研究）
&&3. FF和IE10+的实现&
&可使用Canvas作处理，下面是简单实现的代码，目标元素&&img id="brightness"&src="./mm.jpg"/&&
// 原理：让图像变得更亮或更暗，算法将红色通道、绿色通道、蓝色通道，同时加上一个正值或负值。
var brightness = function(el, delta){
var canvas = document.createElement('canvas');
var w = canvas.width = el.offsetWidth,
h = canvas.height = el.offsetH
var ctx = canvas.getContext('2d');
ctx.drawImage(el, 0, 0);
// 对像素作处理
var imgData = ctx.getImageData(0, 0, w, h), d = imgData.
for (int i = 0, len = d. i & i+=4){
var r = d[i],
g = d[i+1],
b = d[i+2];
d[i] = r +
d[i+1] = g +
d[i+2] = b +
ctx.putImageData(imgData, 0, 0);
var img = new Image();
img.src = ctx.toDataURL("image/*");
var img = brightness(document.getElementById('brightness', 10));
document.body.appendChild(img);
九、色相旋转滤镜(Hue Rotate)
& 诡异的赶脚~~
&1. CSS3滤镜的实现
&style type="text/css"&
.hue-rotate{
格式，filer: hue-rotate(效果范围)
效果范围，取值范0deg~365deg，0（默认值）为无效果
-webkit-filter: hue-rotate(200deg);
-moz-filter: hue-rotate(200deg);
-o-filter: hue-rotate(200deg);
-ms-filter: hue-rotate(200deg);
filter: hue-rotate(200deg);
&div class="hue-rotate" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现（待研究）
&&3. FF和IE10+的实现&（待研究）
十、阴影滤镜(Drop Shadow) &
& &增加立体感！
&1. CSS3滤镜的实现
&style type="text/css"&
.drop-shadow{
格式，filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)
x-offset和y-offset为阴影的相对于元素左上角的位移距离；
1. 阴影的外观受border-radius样式的影响；
2. :after和:before等伪元素会继承阴影的效果。
-webkit-filter: drop-shadow(5px 5px 0px #333);
-moz-filter: drop-shadow(5px 5px 0px #333);
-o-filter: drop-shadow(5px 5px 0px #333);
-ms-filter: drop-shadow(5px 5px 0px #333);
filter: drop-shadow(5px 5px 0px #333);
border: solid 10px #e00;
-webkit-border-radius: 10
&div class="drop-shadow" style="background:url(./mm.jpg)"&&/div&
& 2. IE5.5~9的实现
& & & 在真实的IE5.5~9下可使用IE滤镜（IE10+中文档模式为5.5~9则下列的IE滤镜无效）：
* color为阴影颜色，形如"#ff00cc"
* direction为角度，取值范围0,45,90,135,180,225,270,315
filter:Shadow(Color=color,Direction=direction);
* color为阴影颜色，形如"#ff00cc"
* offx为水平偏移量
* offy为垂直偏移量
* positive为1或0
filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive);
& & & &IE10+中文档模式为5.5~9时，则需要DIV+JS处理了。其中有一个jQuery插件：http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js
&&3. FF和IE10+的实现&
& & & 通过CSS3新特新Box-Shadow处理，&box-shadow: 投影方式(inset) X轴偏移量(x-offset) Y轴偏移量(y-offset) 阴影模糊半径(blur-radius) 阴影扩展半径(spread-radius) 阴影颜色(color)&。
& & &&&投影方式(inset)&，可选属性（默认为外阴影），设置为inset时表示内阴影。
& & &&&X轴偏移量(x-offset)&，正值表示阴影位于对象的右边，负值表示阴影位于对象的左边。
& & &&&Y轴偏移量(y-offset)&，正值表示阴影位于对象的底部，负值表示阴影位于对象的顶部。
& & &&&阴影模糊半径(blur-radius)&，可选属性（默认为0，没有模糊效果），值范围&=0。
& & &&&阴影扩展半径(spread-radius)&，可选属性，正值表示阴影扩展，负值表示阴影缩小。
& & &&&颜色(color)&，可选属性(默认值又浏览器决定, Webkit内核的为透明)。
& & & &注意：
1.&投影的外观受到border-radius样式的影响；
& & & & & & 2.&:after和:before等伪元素不继承投影的效果。
十一、总结
& & 上述内容仅仅对CSS3滤镜和FF、IE下的替代方案作简单的介绍，如有纰漏请各位指正，谢谢！
& & &尊重原创，转载请注明来自：& ^_^肥仔John
十二、参考
http://blog.csdn.net/hfahe/article/details/7104496
/html/News/793.html
/tech//69684.html
http://blog.csdn.net/lujunql/article/details/6260643
/shiyangxt/archive//1334633.html
/cn/devnet/html5/articles/css3-basics.html
/jianzhan/630820.html
/blog/qianduan/226.html
/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE%E7%89%87%E8%BD%AC%E6%8D%A2%E6%88%90%E6%A8%A1%E7%B3%8A%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/
(applying-svg-effects-to-html-content)&&http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html
/archives/829
.cn/tags/canvas_getimagedata.asp
/convert-canvas-image
阅读(...) 评论()高斯模糊半透明质感的UI设计作品欣赏随着科技的发展，半透明的电子产品（如：手机、显示屏等）在不久的将来将会普及，半透明的东西看起来非常美丽有新鲜感，实物现在我们还不能体验，但是我们可以先从一些UI设计上感受下也不错！ 今天设计达人网整理高斯模糊半透明质感的UI设计作品，大部分来自dribbble优秀设计站，有些作品可能只是..
此经验为精品经验，需要进行验证才能阅读：
相关经验教程
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益}
我要回帖
更多关于 为什么叫高斯模糊 的文章
更多推荐
- ·什么是出国需要什么证件？什么是出境？
- ·出国留学条件是什么意思？
- ·483除以64与54除以9减3的差,结果是再乘62与16的和？
- ·北京理工特立书院是什么情况明欣未来科技书院靠谱吗？
- ·为什么录屏软件可以录制内部声音我录屏开麦克风录制失败？
- ·格格阿妈佛心的一朵莲健身卡考开衫看情况咔咔是什么意思
- ·郭跃的男朋友是谁 能拿到那么多金牌, 他每天刻苦训练 加关联词
- ·求java的视频，360云盘的，300财富值以资感谢祭系列百度云盘。
- ·求带子 网址
- ·3dmax中怎么让3dmax2012贴图不显示在场景中真实显示
- ·这个应该怎么调，具体excel 数值调节按钮是多少
- ·一般进行数据分析报告常用术语和报告常用什么软件？
- ·手机暴风影音文件夹隐私文件夹设置了密码锁不住
- ·求解第二题第三题～现场求助啊，小明在体育毕业考试中中
- ·求我的少女时代下载链接链接
- ·刚才打开www851ncom的时候，出现一段851n乱码字符串乱码处理com什么意思，
- ·有用pomelo的女朋友没法交流吗，一起交流
- ·朋友发给我的微信领红包提示升级我点击就显示升级 怎么解决 问题是升级都升级不了
- ·如何实现半透明为什么叫高斯模糊糊
- ·网页设计.如何将两个分离的圆照片怎么弄成圆的第二张图这种交叉的？可不可以给个代码？谢谢
- ·手机有一小部分屏幕触屏有些地方点不了地方转移了，比如点正中央不行，必须要偏左一点点，才行，还有的软件里的同一个地方基
- ·在网上怎样预约科目一四需要下载什么软件才可以
- ·生死狙击军火库规律精英军火库透视软件别说没
- ·非常感谢，我找了总有一天你会感谢了就是没找到，非常感谢。
- ·柯云瀚书法价格好是谁？
- ·115视频下载完打开如图，点开其他应用打开过一会就会自己退出，115怎么退出社区回事
- ·万能钥匙破解器不成功用奶瓶破解器那能成功吗
- ·微信里的微信个人相册怎么删除顶部相机里的图片如何删除
- ·我的手机是红米二dota2右上角出现红字了飞机模型怎么删除
- ·上传淘宝衣服,为什么放在仓库上架里就都编辑好了,东西一上架就只有一种颜色跟码数
- ·现在市场上最容易使用的市场部数据分析析软件是什么？
- ·能用h5制作能放电脑上吗制作apps吗
- ·手机手机版行车记录仪软件件为什么只有四个视屏
- ·dxo optics pro 10.5怎么打开arw
