共计 2594 个字符，预计需要花费 7 分钟才能阅读完成。
假设我们的 pm 有这样一个需求, 一张简单的透明 png 图片，如图：
现在要求图片的颜色能根据手机壳的颜色来变色 … 开个玩笑，一般这个时候已经打起来了
要求是用户可以根据用户点击的按钮颜色来设置图片的颜色，也就是说我们的这张黑色主色的图片远远无法满足要求, 那么该怎么办呢？找 UI 吧，多出几张不就行了，ok 做完之后，需求又改了一下，就是不仅有几个可以特定的可供选择颜色的按钮，还可以直接在颜色选取器里选取颜色... 做不了，做不了
其实乍一听好像很变态，不过呢，别急, 我们甚至可以不需要借助太多的 javascript，用 css 就能搞定
这时我们的 filter（滤镜）属性出场
1、filter，从字面意思来看就是滤镜，官方定义 filter 属性定义了元素 (通常是 <img>) 的可视效果(例如：模糊与饱和度)
2、用法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 可以看到，属性有很多可选值，他们都是什么意思呢？
1 grayscale 灰度
2 sepia 褐色（有种复古的旧照片感觉）3 saturate 饱和度
4 hue-rotate 色相旋转
5 invert 反色
6 opacity 透明度
7 brightness 亮度
8 contrast 对比度
9 blur 模糊
10 drop-shadow 阴影
这里我们用到的是 drop-shadow
drop-shadow 也可以理解为投影，它很符合真实世界的投影，比如非透明的颜色，就有投影；透明部分，光线穿过，没投影
其中接收四个参数 如 filter: drop-shadow(x 偏移, y 偏移, 模糊大小, 色值)
第三个参数如果不写直接填写为色值 如
img{
width: 100px;
height: 100px;
position: relative;
left: -100px;
filter:drop-shadow(100px 0px red)
}这就代表这张图片在原图的右侧 100px 处生成一 ’ 投影 ’
写到这里还差一点我们就可以完成需求了
这里可以看到 其实是生成了两张图片，一张原图一张投影。到此，应该都能想到，将原图隐藏就可以了，所以我们只需在 img 外层包裹一层块级元素，将块级元素的宽高设定成我们所需要的，加上 overflow 属性, 再将原图定位到父元素的外面，投影留在里面就 ok，直接上成品代码
css
<style>
#a{
width: 100px;
height: 100px;
border: 1px solid #dddddd;
margin: 100px auto;
overflow: hidden;
}
img{
width: 100px;
height: 100px;
position: relative;
left: -100px;
filter:drop-shadow(100px 0px red)
}
#color{
width: 600px;
line-height: 60px;
margin: 100px auto;
text-align: center;
}
#color button,#random {
width: 100px;
outline: none;
border: none;
height:30px;
margin-right: 20px;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.t {
margin: 0 auto;
width: 400px;
text-align: center;
}
#random {background: #000000}
</style>
html
<!doctype html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sssssss</title></head>
<body>
<div id=”a”>
<img id="img" src="./2.png" alt=""></div>
<div id=”color”>
<p>
<button>black</button><button>red</button><button>green</button><button>blue</button><button>pink</button><button>gray</button>
</p></div>
<div class=”t”>
<button id='random'>random</button></div>
</body>
</html>
javascript
var getRandomColor = function(){
return '#'+Math.floor(Math.random()*16777215).toString(16);}
var setColor = function (dom) {
dom.style.background = dom.innerHTML
return dom}
let btn_list = document.querySelectorAll(‘#color button’)
btn_list.forEach(el => {
setColor(el).onclick = function () {img.style.filter = 'drop-shadow(100px 0px'+ this.innerHTML +')'
}})
random.onclick = function () {
img.style.filter = 'drop-shadow(100px 0px'+ getRandomColor() +')'}
最终效果
具体详细的写法还需要根据不同的需求来定，其它用法大家也可以研究一下，如 sepia 可以让多色彩的图片看起来有复古效果，blur 让图片模糊。。。具体用法就不一一介绍了 不过 filter 在 ie 浏览器上是不支持的。
