首页 » CSS » 有趣的hue-rotate滤镜

最后更新于 2018年05月09日

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

我门先找一张图片:
-50

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

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

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

效果图:
-50

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

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao