有趣的hue-rotate滤镜

css3的滤镜真的非常强大，比如这个hue-rotate滤镜，可以让图片的一些颜色变成想要的颜色，当然黑色白色除外，因为这个滤镜的原理就是改变图片的色相，如果你用过ps的话就会知道，再ps里面可以通过改变图片的色相来改变图片的颜色，而且效果很方便，不会有颜色与颜色之前的不自然感。下面我们来看看吧！

我门先找一张图片：

这张应该是红宝石的壁纸，我们先用ps颜色拾取工具或者红宝石的hsl色环角度。

红色hsl为4deg，那么我们试着把他变成紫色的！已知紫色hsl色环值为282deg，我们需要添加多少的角度值才能等于282deg，于是：282-4=278，我们需要添加278deg，于是代码这么写;

img {
    filter: hue-rotate(278deg);
}

效果图：

是不是贼漂亮，红宝石变紫色的了，哈哈...这种方法还可以引用于更改一些纯色的logo，这样就省去了每次都要替换图片资源的事情，不过滤镜支持的都是现代浏览器，如果想要兼容旧版，可能还是需要更改下资源这些，不过随着浏览器更新版本越来越快，相信我们用css随心所欲的日子总是会到来的。