经常有这样一种需求,图标在不同状态下显示不同颜色,原来使用的办法是每个颜色用ps做一份,但是想想这样好像很low,关键是不灵活,颜色不能随便改动,能不能直接用css达到动态控制的效果呢?
于是百度了一下,结合自己的操作实践,发现确实是可以的,所以把这次样例记下来,以备再用.
原理简单来说就是用原图形状作为蒙版,进行投影,然后将本体隐藏
<!DOCTYPE html><html><head></head><body style=""><div style="
overflow: hidden;
background:#166fcd;
">
<img style="
filter: drop-shadow(30px 0px 0px white);
border-right: 30px solid transparent;
margin-left: -30px;" src="图片地址"></div></body></html>
791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
