图片 53

SVG和IE滤镜代替方案详解,滤镜完毕

一、前言                               

一、前言                               

【CSS三】CSS叁 滤镜完成,css三滤镜达成

 
IE特有的滤镜日常作为CSS三各样新个性的降级处理补充,而Adobe转向HTML5后与Chrome同盟推出CSS三的Filter个性,因而当前仅Webkit内核的浏览器辅助CSS三Filter,而FF和IE十+则要求动用SVG滤镜(svg effects for
html)或Canvas作为代替方案管理了,而IE5.五~玖则使用IE滤镜、JS+DIV或VML处理!本篇为先占个坑,今后渐次填^_^!!!

 
IE特有的滤镜经常作为CSS3各样新特征的降级管理补充,而Adobe转向HTML5后与Chrome同盟生产CSS三的Filter天性,因而当前仅Webkit内核的浏览器协助CSS3Filter,而FF和IE10+则须求利用SVG滤镜(svg effects for
html)或Canvas作为代表方案管理了,而IE5.五~玖则使用IE滤镜、JS+DIV或VML管理!本篇为先占个坑,未来渐次填^_^!!!

作者:^_^肥仔John      来源:CSS③法力堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

 IE特有的滤镜日常作为CSS3各样新特色的降级管理补充,而Adobe转向HTML五后与Chrome协作生产CSS3的Filter个性,由此当前仅Webkit内核的浏览器协助CSS三Filter,而FF和IE十+则必要利用SVG滤镜(svg effects for
html)或Canvas作为代表方案管理了,而IE5.伍~9则使用IE滤镜、JS+DIV或VML处理!

本篇只做CSS3的滤镜完结,其他实际能够来源小说。

CSS3 Filter包容性表如下:

图片 1

 

滤镜完成效益图:

PC显示:

图片 2

手提式有线电话机呈现:

图片 3

连带代码:

1.HTML 代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width,user-scalable=no" name="viewport" />
    <link href="/images/web_mini.ico" type="image/x-icon" rel="shortcut icon" />
    <title>CSS3 滤镜实现</title>
    <link href="css/20160110.css" rel="stylesheet" />
</head>
<body>
    <div style="display: table; text-align: center; width: 100%; height: 100%;">
        <div style="display: table-cell; vertical-align: middle;">
            <div class="div_20160110">
                <img src="img/img_20160110.jpg" class="" alt="原图" title="原图" />
                <img src="img/img_20160110.jpg" class="sepia " alt="Speia滤镜" title="Speia滤镜" />
                <img src="img/img_20160110.jpg" class="grayscale " alt="灰度图滤镜" title="灰度图滤镜" />
                <img src="img/img_20160110.jpg" class="blur " alt="高斯模糊滤镜" title="高斯模糊滤镜" />
                <img src="img/img_20160110.jpg" class="invert " alt="反色滤镜" title="反色滤镜" />
                <img src="img/img_20160110.jpg" class="saturate " alt="饱和度滤镜" title="饱和度滤镜" />
                <img src="img/img_20160110.jpg" class="contrast " alt="对比度滤镜" title="对比度滤镜" />
                <img src="img/img_20160110.jpg" class="brightness " alt="亮度滤镜" title="亮度滤镜" />
                <img src="img/img_20160110.jpg" class="hue-rotate " alt="色相旋转滤镜" title="色相旋转滤镜" />
                <img src="img/img_20160110.jpg" class="drop-shadow " alt="阴影滤镜" title="阴影滤镜" />
            </div>
        </div>
    </div>
</body>
</html>

 

2.CSS 代码

.div_20160110 img {
    max-width: 150px;
    max-height: 150px;
}

.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%);
}

.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%);
}

.blur { /**  格式,filer: blur(模糊半径)
     *  模糊半径,取值范围0~Npx,0为无效果
     */
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

.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);
}

.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);
}

.contrast { /**  格式,filer: contrast(效果范围)
     *  效果范围,取值范围>=0的数字或百分数,1为无效果
     */
    -webkit-filter: contrast(2);
    -moz-filter: contrast(2);
    -o-filter: contrast(2);
    -ms-filter: contrast(2);
    filter: contrast(2);
}

.brightness { /**  格式,filer: brightness(效果范围)
     *  效果范围,取值范围>=0的数字或百分数,1为无效果
     */
    -webkit-filter: brightness(2);
    -moz-filter: brightness(2);
    -o-filter: brightness(2);
    -ms-filter: brightness(2);
    filter: brightness(2);
}

.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);
}

.drop-shadow { /**  格式,filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)
     *  x-offset和y-offset为阴影的相对于元素左上角的位移距离;
     * 注意:
     *     1. 阴影的外观受border-radius样式的影响;
     *     2. :after和:before等伪元素会继承阴影的效果。
     */
    -webkit-filter: drop-shadow(1px 1px 0px #333);
    -moz-filter: drop-shadow(1px 1px 0px #333);
    -o-filter: drop-shadow(1px 1px 0px #333);
    -ms-filter: drop-shadow(1px 1px 0px #333);
    filter: drop-shadow(1px 1px 0px #333); /*圆角*/
    border: solid 2px #e00;
    -webkit-border-radius: 1px;
}

 

测试地点:

滤镜达成,css3滤镜达成 作者:
^_^肥仔John 来源:
CSS3法力堂:CSS3滤镜及Canvas、SVG和IE滤镜代替方案详解
IE特有的滤镜平日作为…

  CSS叁 Filter包容性表

  CSS三 Filter包容性表

  图片 4

  图片 5

  SVG effect for HTML包容性表

  SVG effect for HTML兼容性表

  图片 6

  图片 7

  下文将追究以下滤镜!

  下文将商量以下滤镜!

  Speia滤镜     灰度图滤镜     高斯歪曲滤镜     反色滤镜     饱和度滤镜
    

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

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

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

  先P张原图作规范(清纯MM哦!!)  

  先P张原图作标准(清纯MM哦!!)  

  图片 8

  图片 9

 

 

二、Speia滤镜(Speia)                      

二、Speia滤镜(Speia)                      

 
Speia滤镜是对图纸或因素全部进行石绿色管理,就是老照片这种效果。上面直接看医疗效果!

 
Speia滤镜是对图片或因素全体举办深翠绿色管理,正是老照片这种效果。上边直接看医疗效果!

  图片 10

  图片 11

   看,岁月的印迹啊,是否有母亲时代的感觉啊?!

   看,岁月的印痕啊,是否有阿妈时期的认为啊?!

   一. CSS三滤镜兑现

   一. CSS③滤镜落实

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

图片 12

    

<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~九特的管理方式(待切磋)

图片 13

     
尝试过IE滤镜 filter:progid:XDImageTransform.Microsoft.MaskFilter(color=颜色) ,仅仅能采纳gif图片(别的格式的图纸将形成整个因素消失不见),而且遮罩层与图片重合的部分将改为空白一片,别的在IE1一浏览器文书档案形式为5.5~玖下滤镜均失效(成分遵照未有设置滤镜的法子被渲染展现)。结论:IE滤镜无法管理Sepia效果。

    

     
而通过js填坑方面,主张1:在要素表面附加1层半晶莹剔透木色色的遮罩层,但效益与CSS3Filter相距甚远,失利告终。。。。。。。

   2. IE5.5~九特的管理格局(待研商)

 

      尝试过IE滤镜 filter:progid:XDImageTransform.Microsoft.MaskFilter(color=颜色) ,仅仅能选取gif图片(别的格式的图纸将产生整个因素消失不见),而且遮罩层与图片重合的有个别将改为空白一片,其余在IE11浏览器文书档案情势为5.伍~九下滤镜均失效(成分根据未有安装滤镜的点子被渲染展现)。敲定:IE滤镜不能够管理Sepia效果。

   叁. FF和IE十+的处理方式

     
而由此js填坑方面,主张一:在要素表面附加1层半透明棕红色的遮罩层,但成效与CSS3Filter相距甚远,战败告终。。。。。。。

      可使用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);

   三. FF和IE10+的管理形式

 

      可利用Canvas作管理,下边是轻便完成的代码,目的成分 <img id=”sepia” src=”./mm.jpg”/> 

三、灰度图滤镜(格雷scale)                    

图片 14

  灰度图艺术范!

// 定义处理方法
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);

  图片 15

图片 16

  一. CSS叁滤镜的贯彻

 

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

三、灰度图滤镜(格雷scale)                    

 

  灰度图艺术范!

  2. IE5.5~9的实现

  图片 17

     使用IE滤镜: filter:gray; 

  壹. CSS三滤镜的完成

 

图片 18

  三. FF和IE10+的管理方式

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

      使用SVG effect for HTML的方式:

图片 19

    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>  

  2. IE5.5~9的实现

*        index.html:*

     使用IE滤镜: filter:gray; 

<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”/> 

  三. FF和IE10+的管理格局

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);

      使用SVG effect for HTML的方式:

 

   * grayscale.svg*:

四、高斯模糊滤镜(Blur)                      

<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:*

 
 图片 20

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

  壹. CSS3滤镜的实现

     可使用Canvas作处理,上边是回顾达成的代码,目的成分 <img id=”grayscale” src=”./mm.jpg”/> 

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

图片 21

     

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);

  2. IE5.5~9的实现

图片 22

       使用IE滤镜:  filter:
progid:DXImageTransform.Microsoft.Blur(PixelRadius=十,
MakeShadow=false);  ,该办法在IE1一普通话档格局为伍.伍~玖均起效果。

 

  

四、高斯模糊滤镜(Blur)                      

  3. FF和IE10+的实现 

   高斯歪曲让自家想起忘了戴老花镜上街的风貌*~*!

   使用SVG effect for HTML的方式:

   图片 23

   *      blur.svg*:

  一. CSS3滤镜的落到实处

<?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:  x="0" y="0" height="200" width="200" filter="url(#blur)"/>  </svg>

图片 24

*            index.html(FF下):*

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

图片 25

         
 index.html(IE十+下,IE十+不辅助直接在体制表对成分运用SVG滤镜):

     

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

  2. IE5.5~9的实现

 

       使用IE滤镜:  filter:
progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,
MakeShadow=false);  ,该方法在IE1第11中学文档形式为5.5~9均起效果。

 
  使用Canvas作处理,高斯模糊的算法请参见:阮先生的“高斯模糊的算法”仿效译文,管理库StackBlur.js。

  

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

  3. FF和IE10+的实现 

  • sourceImageID代表要模糊的图样的id, 默许那一个图片要潜伏;

  • targetCanvasID意味着要出示模糊图片的canvas元素的id;

  • radius代表模糊的半径大小。但是,依照本身的对待测试,radius恍如与CSS中filter滤镜的歪曲值不是1:1协作的,反倒是某个类似2:1.

    也便是此处的20px的半径模糊近似于CSS中blur滤镜值设置为10px;

  • blurAlphaChannel为布尔属性,表示aplha晶莹剔透通道是否要模糊,true意味着要模糊。

   使用SVG effect for HTML的方式:

 

   *      blur.svg*:

5、反色滤镜(Inver)                        

图片 26

  经历过胶圈时期的同学都熟谙哦!

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

  图片 27

图片 28

  一. CSS三滤镜的得以实现

*            index.html(FF下):*

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

 

       
   index.html(IE十+下,IE十+不补助间接在样式表对成分选择SVG滤镜):

  2. IE5.5~9的实现(待研究)**

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

 

 

  3. FF和IE10+的实现 

 
  使用Canvas作处理,高斯模糊的算法请参考:阮先生的“高斯模糊的算法”参照他事他说加以考查译文,管理库StackBlur.js。

          可使用Canvas作处理,上边是粗略实现的代码,目的元素 <img
id=”invert” src=”./mm.jpg”/> 

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

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);
  • sourceImageID意味着要模糊的图纸的id, 暗中认可这么些图形要藏匿;

  • targetCanvasID表示要显得模糊图片的canvas元素的id;

  • radius表示模糊的半径大小。不过,依照本身的对照测试,radius好像与CSS中filter滤镜的混淆值不是1:1卓越的,反倒是有个别类似2:1.

    也正是此处的20px的半径模糊近似于CSS中blur滤镜值设置为10px;

  • blurAlphaChannel为布尔属性,表示aplha透明通道是或不是要模糊,true代表要模糊。

 

 

⑥、饱和度滤镜(Saturate)                      

伍、反色滤镜(Inver)                        

  暖暖的赶脚~~~!

  经历过胶圈时代的同班都纯熟哦!

  图片 29

  图片 30

  壹. CSS3滤镜的贯彻

  一. CSS叁滤镜的落实

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

图片 31

 

<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的实现**(待研究)**

图片 32

 

 

  3. FF和IE10+的实现 (待研究)

  2. IE5.5~9的实现(待研究)**

 

 

7、比较度滤镜(Contrast)                     
    

  3. FF和IE10+的实现 

  图片 33

          可使用Canvas作处理,上面是简轻便单完成的代码,目的成分 <img id=”invert” src=”./mm.jpg”/> 

 

图片 34

  一. CSS叁滤镜的达成

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);
<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>

图片 35

 

 

  2. IE5.5~9的实现**(待研究)**

六、饱和度滤镜(Saturate)                      

 

  暖暖的赶脚~~~!

  3. FF和IE10+的实现 (待研究)

  图片 36

 

  1. CSS叁滤镜的贯彻

捌、亮度滤镜(Brightness)                      

图片 37

   暴露过度哦!

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

  图片 38

图片 39

  一. CSS三滤镜的兑现

 

<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的实现**(待研究)**

 

 

  2. IE5.5~9的实现**(待研究)**

  3. FF和IE10+的实现 (待研究)

 

 

  3. FF和IE10+的实现 

7、相比较度滤镜(Contrast)                     
    

   可使用Canvas作处理,上面是粗略实现的代码,指标成分 <img
id=”brightness” src=”./mm.jpg”/> 

  图片 40

// 原理:让图像变得更亮或更暗,算法将红色通道、绿色通道、蓝色通道,同时加上一个正值或负值。  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);

 

 

  一. CSS3滤镜的贯彻

九、色相旋转滤镜(Hue
Rotate)                        

图片 41

  奇异的赶脚~~

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

  图片 42

图片 43

 1. CSS三滤镜的达成

 

<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的实现**(待研究)**

 

 

  2. IE5.5~9的实现**(待研究)**

  3. FF和IE10+的实现 (待研究)

 

 

  3. FF和IE10+的实现 (待研究)

捌、亮度滤镜(Brightness)                      

 

   暴露过度哦!

十、阴影滤镜(Drop Shadow)                      

  图片 44

   增添立体感!

  1. CSS三滤镜的落到实处

  图片 45

图片 46

 壹. CSS叁滤镜的兑现

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

图片 47

 

 

  2. IE5.5~9的实现

  2. IE5.5~9的实现**(待研究)**

     
在顾名思义的IE5.5~玖下可应用IE滤镜(IE拾+中文档情势为伍.伍~玖则下列的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);

  3. FF和IE10+的实现 

 

   可使用Canvas作处理,下边是简轻巧单实现的代码,目的元素 <img id=”brightness” src=”./mm.jpg”/> 

     
 IE十+粤语档格局为5.5~九时,则须求DIV+JS管理了。其中有2个jQuery插件:

图片 48

 

// 原理:让图像变得更亮或更暗,算法将红色通道、绿色通道、蓝色通道,同时加上一个正值或负值。
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);

  3. FF和IE10+的实现 

图片 49

      通过CSS3新特新Box-Shadow处理, box-shadow: 投影方式(inset)
X轴偏移量(x-offset) Y轴偏移量(y-offset) 阴影模糊半径(blur-radius)
阴影扩张半径(spread-radius) 阴影颜色(color) 。

 

   
   投影情势(inset) ,可选属性(默以为外阴影),设置为inset时表示内阴影。

玖、色相旋转滤镜(Hue
Rotate)                        

   
   X轴偏移量(x-offset) ,正值表示阴影位于对象的左侧,负值表示阴影位于对象的左侧。

  奇怪的赶脚~~

   
   Y轴偏移量(y-offset) ,正值表示阴影位于对象的底层,负值表示阴影位于对象的最上端。

  图片 50

   
   阴影模糊半径(blur-radius) ,可选属性(默认为0,未有歪曲效果),值范围>=0。

 一. CSS三滤镜的兑现

   
   阴影扩充半径(spread-radius) ,可选属性,正值表示阴影扩大,负值表示阴影收缩。

图片 51

       颜色(color) ,可选属性(暗中同意值又浏览器决定, Webkit内核的为透明)。

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

       注意:

图片 52

    1. 阴影的外观受到border-radius样式的影响;

 

            2. :after:before等伪成分不一连投影的作用。

  2. IE5.5~9的实现**(待研究)**

 

 

十一、总结                            

  3. FF和IE10+的实现 (待研究)

   
上述内容唯有对CSS三滤镜和FF、IE下的取代方案作轻松的牵线,如有纰漏请各位指正,谢谢!

 

   
 尊重原创,转载请注脚来源: 
^_^肥仔John

10、阴影滤镜(Drop Shadow)                      

 

   增添立体感!

十二、参考                            

  图片 53

 1. CSS三滤镜的落实

图片 54

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

图片 55

 

  2. IE5.5~9的实现

     
在实际的IE五.伍~九下可使用IE滤镜(IE十+中文档形式为五.五~玖则下列的IE滤镜无效):

图片 56

/**
 * 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);

SVG

图片 57

(applying-svg-effects-to-html-content)——

 

Canvas

     
 IE10+中文档格局为五.5~九时,则需求DIV+JS管理了。在那之中有二个jQuery插件:

 

  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内核的为透明)。

       注意:

    一. 投影的外观受到border-radius样式的影响;

            2. :after:before等伪成分不几次三番投影的机能。

 

十一、总结                            

   
上述剧情只有对CSS三滤镜和FF、IE下的代表方案作简单的牵线,如有纰漏请各位指正,谢谢!

   
 尊重原创,转发请表明来源: 
^_^肥仔John

 

十二、参考                            

SVG

(applying-svg-effects-to-html-content)——

Canvas