CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

最新推荐文章于 2022-03-31 19:52:32 发布
最新推荐文章于 2022-03-31 19:52:32 发布
阅读量159 收藏 1
点赞数
文章标签： javascript php ViewUI

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　   

  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兼容性表

  

  下文将探讨以下滤镜！

  Speia滤镜     灰度图滤镜     高斯模糊滤镜     反色滤镜     饱和度滤镜     

  对比度滤镜    亮度滤镜        色相旋转滤镜      阴影滤镜

  先P张原图作参考系（清纯MM哦！！）  

  

 

二、Speia滤镜(Speia)　　　　　　　　　　　　　　　　　　　　　　

  Speia滤镜是对图片或元素整体进行棕褐色处理，就是老照片那种效果。下面直接看疗效！

  

   看，岁月的痕迹啊，是不是有妈妈年代的感觉呢？！

   1. CSS3滤镜实现

<style type="text/css">
  .sepia{
    /**  格式，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%);  
  }
</style>
<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.offsetHeight;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(el, 0, 0);
  
  // 对像素作处理
  var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;
  for (int i = 0, len = d.length; i < len; 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/*");
  return img;
};

// 调用
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%);  
  }
</style>
<div class="grayscale" style="background:url(./mm.jpg)"></div>

 

  2. IE5.5~9的实现

     使用IE滤镜： filter:gray; 

 

  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.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>  
 </filter>  
</svg>

        index.html:

<style type="text/css">
.grayscale{
  filter:url(./grayscale.svg#grayscale);
}
</style>
<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.offsetHeight;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(el, 0, 0);
  
  // 对像素作处理
  var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;
  for (int i = 0, len = d.length; i < len; 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/*");
  return img;
};

// 调用
var img = grayscale(document.getElementById('grayscale'));
document.body.appendChild(img);

 

四、高斯模糊滤镜(Blur)　　　　　　　　　　　　　　　　　　　　　　

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

   

  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表示要模糊。

 

五、反色滤镜(Inver)　　　　　　　　　　　　　　　　　　　　　　　　

  经历过胶圈年代的同学都熟悉哦！

  

  1. CSS3滤镜的实现

<style type="text/css">
  .invert{
    /**  格式，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); 
  }
</style>
<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.offsetHeight;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(el, 0, 0);
  
  // 对像素作处理
  var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;
  for (int i = 0, len = d.length; i < len; i+=4){
    var r = d[i],
         g = d[i+1],
         b = d[i+2];
    d[i] = 255 - r;
    d[i+1] = 255 - g;
    d[i+2] = 255 - b;
  }
  ctx.putImageData(imgData, 0, 0);

  // 导出
  var img = new Image();
  img.src = ctx.toDataURL("image/*");
  return img;
};

// 调用
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); 
  }
</style>
<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); 
  }
</style>
<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); 
  }
</style>
<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.offsetHeight;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(el, 0, 0);
  
  // 对像素作处理
  var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;
  for (int i = 0, len = d.length; i < len; i+=4){
    var r = d[i],
         g = d[i+1],
         b = d[i+2];
    d[i] = r + delta;
    d[i+1] = g + delta;
    d[i+2] = b + delta;
  }
  ctx.putImageData(imgData, 0, 0);

  // 导出
  var img = new Image();
  img.src = ctx.toDataURL("image/*");
  return img;
};

// 调用
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); 
  }
</style>
<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: 10px;
  }
</style>
<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下的替代方案作简单的介绍，如有纰漏请各位指正，谢谢！

     尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/4127888.html  ^_^肥仔John

 

十二、参考　　　　　　　　　　　　　　　　　　　　　　　　　　　　

http://blog.csdn.net/hfahe/article/details/7104496

http://www.yyjcw.com/html/News/793.html

http://www.hackbase.com/tech/2014-11-10/69684.html

http://blog.csdn.net/lujunql/article/details/6260643

http://www.cnblogs.com/shiyangxt/archive/2008/11/16/1334633.html

http://www.adobe.com/cn/devnet/html5/articles/css3-basics.html

http://www.educity.cn/jianzhan/630820.html

http://www.526net.com/blog/qianduan/226.html

http://www.zhangxinxu.com/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/

SVG

(applying-svg-effects-to-html-content)——http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html

Canvas

http://www.webclks.com/archives/829

http://www.w3school.com.cn/tags/canvas_getimagedata.asp

http://www.webhek.com/convert-canvas-image

weixin_34221073
关注
canvas学习（十九）：css3 filter的十种特效
总有一天，你的日积月累，会成为别人的望尘莫及
01-31 1531
跟着慕课网上的老师学“使用canvas玩转红包”时，觉得老师讲的filter特效听酷的，就跟着老师的例子琢磨了一下，这里做个记录。   这里不讲css3的filter是什么，感兴趣的什么可以看这里。   filter的十种属性为： grayscale：灰度，取值范围0-1(表示0%的原色到100%的灰色)，默认值1 sepia：褐色，取值范围0-1(表示0%的原色到100%的褐色)，...
JS魔法堂：函数节流（throttle）与函数去抖（debounce）
最新发布
2401_84092068的博客
04-19 1102
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题）**[外链图片转存中…(img-51SJpetQ-1713516906680)]
svg 实例效果图
rainbow的专栏
03-19 1097
动态 普通效果 http://www.adobe.com/svg/dynamic/transformations2.html   无JS干预效果 http://www.adobe.com/svg/dynamic/declarative.html JS干预效果 http://www.adobe.com/svg/dynamic/javascript.html 鼠标事件效果，注意可以在H
cesium实现底图反色滤镜效果（详细教程）
专注GIS开发
02-19 7680
cesium实现底图反色滤镜效果（最详细教程）
vue兼容IE11浏览器空白页等一系列问题之踩坑全过程
deciduous_leaves的博客
03-31 4795
兼容IE对于一个菜鸡前端来说，简直是噩梦般的存在。我先哭为敬！😭😭😭 好了，话不多说，摸索中解决问题之路即将开启，我们准备出发～👊（建议将文章全部看完之后再进行尝试，因为中间有很多尝试没有成功） 重要提醒： 1、改完代码记得清浏览器缓存，再去看结果，尤其是在坚信自己写得没错的时候，不行就把浏览器关了再打开（好几次都是清完缓存没反应，关了重新打开就好了，就很迷） 2、安装依赖时能用npm就别用cnpm，别问我为什么🙄️ 问题产生原因及解决思路：IE浏览器不能显示vue页面，主要原因是IE无法读取es
.Net魔法堂：史上最全的ActiveX开发教程——开发篇
06-20
《.Net魔法堂：史上最全的ActiveX开发教程——开发篇》 ActiveX技术是微软在90年代末推出的一种组件技术，它允许开发者创建可以在Web浏览器中运行的控件，提供丰富的用户交互体验。在.NET框架下开发ActiveX控件，...
.Net魔法堂：ActiveX开发全攻略：从零到精通
作者基于Windows 7和Visual Studio 2010环境，分享了创建ActiveX组件的关键步骤和注意事项。首先，作者强调了采用ActiveX组件的原因，包括提高界面性能和实现服务器Agent之间的P2P通信，但同时也指出可能面临的风险...
java meta info_Java魔法堂：打包知识点之META-INF/MAINFEST.MF
05-31
其中，Manifest-Version 表示 MANIFEST 文件的版本号，Created-By 表示生成 MANIFEST 文件的工具和版本，Main-Class 表示该 JAR 文件的主类名。 除了这些基本信息外，还可以在 MANIFEST 文件中添加自定义信息，比如...
Java魔法堂：找外援的利器——Runtime.exec详解
weixin_34174105的博客
11-07 819
一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  Java虽然五脏俱全但总有软肋，譬如获取CPU等硬件信息，当然我们可以通过JNI调用C/C++来获取，但对于对C/C++和Windows API不熟的码农是一系列复杂的学习和踩坑过程。那能不能通过简单一些、学习成本低一些的方式呢？答案是肯定的，在功能实现放在首位的情况下，借他山之石是最简洁有力的做法。而 Runtime....
HTML5 SVG滤镜文字特效特效代码
03-20
HTML5 SVG滤镜文字特效是一款TweenMax基于svg绘制滤镜文字悬停透明的遮罩光圈显示效果。
HTML5游戏引擎（十四）-颜色效果——混合模式 & 滤镜 & 颜色矩阵滤镜 & 矩阵数据说明
weixin_44867717的博客
12-09 2818
HTML5游戏引擎（十四）-颜色效果——混合模式 & 滤镜 & 颜色矩阵滤镜 & 矩阵数据说明 颜色效果 混合模式 混合模式是指同一个显示容器中的两个显示对象重叠时，重叠区域如何呈现的方式，也就是两个显示对象的重叠区域像素如何混合产生结果像素。 覆盖混合 覆盖混合，表示为”normal”，该显示对象出现在背景前面。显示对象的像素值将覆盖背景的像素值。在显示对象为透明的区域，背景是可见的。 通常不设置混合模式，默认就是覆盖混合。设置图片为覆盖模式的代码： img.blendMode
【CSS3】滤镜+【html5】画布实现图片模糊效果
scarecrowow的专栏
01-07 1691
前一阵子在做虾米音乐播放器的时候偶然发现页面背景颜色和歌曲专辑封面很相像，请教老师才知道这是通过模糊效果实现的。 现在做个小小的总结，实现方法大致有如下三种： 1.CSS3 blur滤镜实现 2.CSS3 SVG滤镜实现 3.html5 canvas+js模糊函数(高斯模糊算法)实现 前2种方法实现起来比较简单: (1)在img标签中添加类名"blur"。 (2)在css
HTML5----CSS3图片滤镜(filter)特效
Damys
06-16 6070
暂不支浏览器：FF,IE...希望后
学习 filter属性 和 常用方式
小小的前端
06-04 505
filter属性 filter CSS属性 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。 原图 blur(px) 模糊 函数将高斯模糊应用于输入图像。值越大越模糊，默认是0，不设置模糊。单位是px,不接受百分比值。 .img { margin-left: 50px; filter: blur(5px); } brightness(%) 亮度 函数将线性乘法器应用于输入图像，使其变暗或变亮。值为 0％ 生成全黑图像。值为 100％ 保持不变。值超过100%也是可
event事件句柄的封装
吴孔云的博客
04-05 821
var eventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventLi
Android系统将内置滤镜功能
凌风探梅的专栏
03-18 3783
from: http://cblog.cc/2015/09/03/Android-Camera-%E5%AE%9E%E6%97%B6%E6%BB%A4%E9%95%9C/ 一、Android系统将内置滤镜功能 滤镜功能有二十余种不同效果，不逊色于极受欢迎的智能手机应用Instagram所产生的效果。 1、颜色矩阵 ColorMatrix android中可以通过颜色矩阵（ColorMa
图片添加CSS滤镜和SVG滤镜实现模糊阴影等效果
芊芊寻的博客
11-07 1万+
CSS滤镜 什么是CSS滤镜 CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 简而言之，就是在CSS中提供了一些已经预定义的属性或函数，实现图像的模糊、变色等效果。 函数 blur() 给图像设置高斯模糊，值越大越模糊，如果没有设定值，那么默认为0，只能设备CSS的长度值，如px、rem等，不支持百分比。 filter: blu...
跨浏览器图像灰度(grayscale)解决方案
热门推荐
whqet
04-03 2万+
实现图像灰度（grayscale）最初有ie4推出的专属属性filter实现，后来在css3里w3c实现了标准的filter，不过不同浏览器的实现程度不一样，因此现阶段我们必须探索一种浏览器兼容的解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值