CSS滤镜调节图片或地图颜色
原始图片
滤镜调节后效果：
代码中替换图片即可：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="./tianditu.jpg" id="tiimg" style="width: 50%;"/> <br> <span>高斯模糊：blur(<span id="showblur"></span>px)</span><input id="gaosi" type="range" value="0" onchange="document.getElementById('showblur').innerHTML=value" /> <br> <span>黑白效果：grayscale(<span id="showgrayscale"></span>%)</span><input id="heiba" type="range" value="0" onchange="document.getElementById('showgrayscale').innerHTML=value" /> <br> <span>怀旧效果：sepia(<span id="showsepia"></span>%)</span><input id="huaij" type="range" value="0" onchange="document.getElementById('showsepia').innerHTML=value"/> <br> <span>反色效果：invert(<span id="showinvert"></span>%)</span><input id="fansx" type="range" value="0" onchange="document.getElementById('showinvert').innerHTML=value"/> <br> <span>透明效果：opacity(<span id="showopacity"></span>%)</span><input id="toum" type="range" value="0" onchange="document.getElementById('showopacity').innerHTML=value"/> <br> <span>图饱和度：saturate(<span id="showsaturate"></span>%)</span><input id="baof" type="range" value="0" onchange="document.getElementById('showsaturate').innerHTML=value"/> <br> <span>色相：hue-rotate(<span id="showhuerotate"></span>deg)</span><input id="sex" type="range" value="0" onchange="document.getElementById('showhuerotate').innerHTML=value" max="360"/> <script> var tup = document.getElementById("tiimg"); var blur=0;var hbxg=0;var hjxg=0;var fans=0;var tmxg=0;var baohd=0;var sex=0; // 高斯模糊 document.getElementById("gaosi").addEventListener("input",function() { blur=this.value; flisd(); }); //黑白效果 document.getElementById("heiba").addEventListener("input",function() { hbxg=this.value; flisd(); }); //怀旧效果 document.getElementById("huaij").addEventListener("input",function() { hjxg=this.value; flisd(); }); //反色效果 document.getElementById("fansx").addEventListener("input",function() { fans=this.value; flisd(); }); //透明效果 document.getElementById("toum").addEventListener("input",function() { tmxg=this.value; flisd(); }); //饱和效果 document.getElementById("baof").addEventListener("input",function() { baohd=this.value; flisd(); }); //色相 document.getElementById("sex").addEventListener("input",function() { sex=this.value; flisd(); }); function flisd(){ if(baohd==0){baohd=2;} tup.style.filter="blur("+blur+"px) grayscale("+hbxg+"%) sepia("+hjxg+"%) invert("+fans+"%) opacity("+(100-tmxg)+"%) saturate("+baohd*50+"%) hue-rotate("+sex+"deg)"; } </script> </body> </html> |
更多属性请查看官方文档尝试：
from:https://blog.csdn.net/josiecici/article/details/127629212