更新于
有趣的hue-rotate滤镜
发布于 / 分类: CSS / 暂无评论 / 阅读量: 101css3的滤镜真的非常强大，比如这个hue-rotate滤镜，可以让图片的一些颜色变成想要的颜色，当然黑色白色除外，因为这个滤镜的原理就是改变图片的色相，如果你用过ps的话就会知道，再ps里面可以通过改变图片的色相来改变图片的颜色，而且效果很方便，不会有颜色与颜色之前的不自然感。下面我们来看看吧！
我门先找一张图片：
这张应该是红宝石的壁纸，我们先用ps颜色拾取工具或者红宝石的hsl色环角度。
红色hsl为4deg，那么我们试着把他变成紫色的！已知紫色hsl色环值为282deg，我们需要添加多少的角度值才能等于282deg，于是：282-4=278，我们需要添加278deg，于是代码这么写;
img {
filter: hue-rotate(278deg);
}
效果图：
是不是贼漂亮，红宝石变紫色的了，哈哈...这种方法还可以引用于更改一些纯色的logo，这样就省去了每次都要替换图片资源的事情，不过滤镜支持的都是现代浏览器，如果想要兼容旧版，可能还是需要更改下资源这些，不过随着浏览器更新版本越来越快，相信我们用css随心所欲的日子总是会到来的。
0
支付宝
微信
暂无评论