CSS3魔法堂：CSS3濾鏡及Canvas、SVG和IE濾鏡替代方案詳解

時間  2019-11-29
標籤 css3 css canvas svg 替代 方案 詳解 欄目 CSS 简体版
原文   原文鏈接

1、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　   css

  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處理！本篇爲先佔個坑，之後慢慢填^_^！！！html

  CSS3 Filter兼容性表jquery

  

  SVG effect for HTML兼容性表web

  

  下文將探討如下濾鏡！算法

  Speia濾鏡     灰度圖濾鏡     高斯模糊濾鏡     反色濾鏡     飽和度濾鏡     canvas

  對比度濾鏡    亮度濾鏡        色相旋轉濾鏡      陰影濾鏡瀏覽器

  先P張原圖做參考系（清純MM哦！！）  app

  

 

2、Speia濾鏡(Speia)　　　　　　　　　　　　　　　　　　　　　　svg

  Speia濾鏡是對圖片或元素總體進行棕褐色處理，就是老照片那種效果。下面直接看療效！post

  

   看，歲月的痕跡啊，是否是有媽媽年代的感受呢？！

   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);
複製代碼

 

3、灰度圖濾鏡(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);
複製代碼

 

4、高斯模糊濾鏡(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表示要模糊。

 

5、反色濾鏡(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);
複製代碼

 

6、飽和度濾鏡(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+的實現 （待研究）

 

7、對比度濾鏡(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+的實現 （待研究）

 

8、亮度濾鏡(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);
複製代碼

 

9、色相旋轉濾鏡(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+的實現 （待研究）

 

10、陰影濾鏡(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等僞元素不繼承投影的效果。

 


     尊重原創，轉載來自：http://www.cnblogs.com/fsjohnhuang/p/4127888.html  ^_^肥仔John

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程