CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果有點像是photoshop的濾鏡功能。透過CSS Filters濾鏡效果我們可以對網頁元素進行渲染。一般情況下、當網頁元素包含子元素時、CSS Filters 會同時對子元素進行渲染。
 

blur 模糊	blur(0px)	0px 到100px，的百分比控制
sepia 懷舊	sepia(0)	0 or 1，1為元素轉換成黑白影像
invert 負片	invert(0)	0 or 1，1為元素轉換成負片影像
opacity 透明	opacity(1)	0 to 1，step 0.1 0為元素轉換成全透明影像
contrast 對比	contrast(0)	0 to 10， 10為明亮和陰暗部份的大差距
saturate飽和	saturate(0)	0 to 10， 10為元素轉換成最大飽和度
brightness 亮度	brightness(0)	0 to 10， 10為元素轉換成最大亮度度
grayscale 灰階	grayscale(0)	0 to 10， 10為元素轉換成最大灰階度
hue-rotate 色相旋轉	hue-rotate(0deg)	0deg – 360deg 旋轉色相環
drop-shadow 下拉陰影	drop-shadow(30px 10px 4px #4444dd)	x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色

<table border="2" style="width:100%;height:100%"><tbody><tr><td width="50%" style="text-align: center;vertical-align:middle"><img id="image" src="https://www.w3schools.com/css/pineapple.jpg"></td><td>drop-shadow(  <INPUT type="text" id="TT1" maxlength="3" value="30" size="1" onkeypress="return isNumberKey(event,this.id)" onkeyup="return isNumberKey(event,this.id)">px <INPUT type="text" id="TT2" maxlength="3" value="10" size="1" onkeypress="return isNumberKey(event,this.id)" onkeyup="return isNumberKey(event,this.id)">px <INPUT type="text" id="TT3" maxlength="3" value="4" size="1" onkeypress="return isNumberKey(event,this.id)" onkeyup="return isNumberKey(event,this.id)">px <INPUT type="color" id="TT4" value="dimgray" onchange="shad()" > ) <br><input type="range" id="blur" value="0" min="0.0" max="100" step="5" /><span id="Ttblur"> blur(0px)</span><br><input type="range" id="grayscale" value="0" min="0.0" max="100" step="5" /><span id="Ttgrayscale"> grayscale(0%)</span><br><input type="range" id="brightness" value="100" min="0.0" max="999" step="5" /><span id="Ttbrightness"> brightness(100%)</span><br><input type="range" id="contrast" value="100" min="0.0" max="999" step="5" /><span id="Ttcontrast"> contrast(100%)</span><br><input type="range" id="rotate" value="0" min="0.0" max="360" step="5" /><span id="Ttrotate"> rotate(0deg)</span><br><input type="range" id="invert" value="0" min="0.0" max="1" step="1" /><span id="Ttinvert"> invert(0)</span><br><input type="range" id="opacity" value="1" min="0" max="1" step="0.1" /><span id="Ttopacity"> opacity(1)</span><br><input type="range" id="saturate" value="1" min="0" max="1" step="0.1" /><span id="Ttsaturate"> saturate(1)</span><br><input type="range" id="sepia" value="0" min="0" max="1" step="1" /><span id="Ttsepia"> sepia(0)</span><br><input type="button" id="Reset" value="reset" /></td></tr></tbody></table><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> var Dshadoe = "20px 20px 4px dimgray"; var blur = 0; var grayscale = 0; var brightness =100; var contrast = 100; var rotate = 0; var invert =0; var opacity = 1; var saturate = 1; var sepia = 0; $(document).on('input change', '#blur', function() { $('#Ttblur').html( 'blur('+$(this).val()+'px)' ); blur = $(this).val() ; Change(); }); $(document).on('input change', '#grayscale ', function() { $('#Ttgrayscale ').html( 'grayscale ('+$(this).val()+'%)' ); grayscale = $(this).val() ; Change(); }); $(document).on('input change', '#brightness', function() { $('#Ttbrightness').html( 'brightness('+$(this).val()+'%)' ); brightness= $(this).val() ; Change(); }); $(document).on('input change', '#contrast', function() { $('#Ttcontrast').html( 'contrast('+$(this).val()+'%)' ); contrast= $(this).val() ; Change(); }); $(document).on('input change', '#rotate', function() { $('#Ttrotate').html( 'rotate('+$(this).val()+'deg)' ); rotate= $(this).val() ; Change(); }); $(document).on('input change', '#invert', function() { $('#Ttinvert').html( 'invert('+$(this).val()+')' ); invert= $(this).val() ; Change(); }); $(document).on('input change', '#opacity', function() { $('#Ttopacity').html( 'opacity('+$(this).val()+')' ); opacity= $(this).val() ; Change(); }); $(document).on('input change', '#saturate', function() { $('#Ttsaturate').html( 'saturate('+$(this).val()+')' ); saturate = $(this).val() ; Change(); }); $(document).on('input change', '#sepia', function() { $('#Ttsepia').html( 'sepia('+$(this).val()+')' ); sepia = $(this).val() ; Change(); }); $(document).on("click","#Reset",function() { $("#blur").val("0");blur=0 ; $('#Ttblur').html('blur(0px)'); $("#grayscale").val("0");grayscale=0; $('#Ttgrayscale').html('grayscale(0%)'); $("#brightness").val("100");brightness=100; $('#Ttbrightness').html('brightness(100%)'); $("#contrast").val("100") ; contrast= 100; $('#Ttcontrast').html('contrast(100%)'); $("#rotate").val("0") ; rotate= 0; $('#Ttrotate').html('rotate(0deg)'); $("#invert").val("0") ; invert= 0; $('#Ttinvert').html('invert(0)'); $("#opacity").val("1") ; opacity= 1; $('#Ttopacity').html('opacity(1)'); $("#saturate").val("1") ; saturate= 1; $('#Ttsaturate').html('saturate(1)'); $("#sepia ").val("0") ; sepia = 0; $('#Ttsepia').html('sepia(0)'); Change()}); function Change(){ $("#image").css("-webkit-filter", "drop-shadow(" + Dshadoe +")" + "blur(" + blur + "px)" + "brightness(" + brightness + "%)" + "grayscale(" + grayscale + "%)" + "hue-rotate(" + rotate + "deg)" + "contrast(" + contrast + "%)" + "invert(" + invert + ")" + "opacity(" + opacity + ")" + "saturate(" + saturate + ")" + "sepia(" + sepia + ")"); } Change() function isNumberKey(evt,ID,VV){ var VV = document.getElementById(ID) ; var charCode = (evt.which) ? evt.which : event.keyCode if(VV.value > 100){VV.value = 100;shad();return false;} if (charCode > 31 && (charCode < 48 || charCode > 57)) {shad();return false;} shad();return true; } function shad(){ var Ctxt = TT1.value + "px "; Ctxt += TT2.value + "px "; Ctxt += TT3.value + "px "; Ctxt += TT4.value ; Dshadoe = Ctxt ; Change(); dd123.innerHTML =Ctxt ; } </script>

00

#CSS Filters濾鏡效果#html Filters濾鏡效果#blur 模糊#sepia 懷舊#invert 負片#opacity 透明#contrast 對比#saturate飽和#brightness 亮度#grayscale 灰階#hue-rotate 色相旋轉#drop-shadow 下拉陰影