CSS 的 filter

css 的 filter 相當好用，有時候只是想換個顏色，完全不需要再做另一張圖 <style> .a06241 input { vertical-align:middle } .a06241 input[type="range"] { width:90%; } .a06241 .idimg { border:1px solid #000; padding:5%; } </style> <div class="a06241"> <div id="a06241_div" style="display:inline-block;width:60%;vertical-align:top"> <div id="a06241_id" style="display:none"> <label> <input type="checkbox"> <span>blur</span><br> </label> <input type="range" min="0" max="100" value="0"> </div> </div> <div style="display:inline-block;width:35%"> <img src="https://yiharng.github.io/bomb.png" class="idimg" width=70%><br> <img src="https://yiharng.github.io/bird.jpg" class="idimg" width=70%><br> $textarea id="a06241_filter" style="width:100%;height:8em">$/textarea> </div> </div> <script> (function() { let ff= [ {name:"blur({v}px)",min:0,max:10,v:0}, {name:"brightness({v}%)",min:0,max:200,v:100}, {name:"contrast({v}%)",min:0,max:200,v:100}, {name:"drop-shadow({v}px {v}px 10px #000)",min:0,max:30,v:0}, {name:"grayscale({v}%)",min:0,max:100,v:0}, {name:"invert({v}%)",min:0,max:100,v:0}, {name:"opacity({v}%)",min:0,max:100,v:100}, {name:"sepia({v}%)",min:0,max:100,v:0}, {name:"saturate({v}%)",min:0,max:1000,v:100}, {name:"hue-rotate({v}deg)",min:0,max:360,v:0}, ] let i; for (i in ff) { let hh="<div id='a06241_id"+i+"'>"+$("#a06241_id").html()+"</div>"; let oo=$(hh); let v=ff[i].v; let ss=ff[i].name.replace(/{v}/g,v); oo.find("span").html(ss); oo.find("input[type=range]").attr("min",ff[i].min); oo.find("input[type=range]").attr("max",ff[i].max); oo.find("input[type=range]").attr("value",ff[i].v); $("#a06241_div").append(oo); } function dofilter() { let i; let hh=""; for (i in ff) { if ($("#a06241_id"+i+" input[type=checkbox]").prop("checked")) { hh+=$("#a06241_id"+i+" span").html()+" "; } } $(".a06241 .idimg").css("filter",hh); $("#a06241_filter").val(hh); } $("#a06241_div input[type=range]").on("input",function() { let id=$(this).parent().attr("id"); let i=id.match(/id(\d*)/)[1]; let v=$("#"+id+" input[type=range]").val(); let ss=ff[i].name.replace(/{v}/g,v); $("#"+id).find("span").html(ss); dofilter(); }); $("#a06241_div input[type=checkbox]").on("change",function() { dofilter(); }); $("#a06241_filter").on("input",function() { let hh=$("#a06241_filter").val(); $(".a06241 .idimg").css("filter",hh); }); })() </script>