CSS揭秘 (4)- 图片染色

原创 乘风逐月 随笔 CSS知识记录 427阅读 2018-08-09 11:35:58 举报
一、图片染色

问题:如何给图片增加染色效果?

方法一:使用滤镜

filter 属性有多个滤镜函数:
a.sepia(%)滤镜: 给图片增加黄色的染色效果,值为0%~100%之间,数值越大,黄色染色效果越明显;
b.saturate(%)滤镜: 转换图片饱和度,值为0%~100%之间,数值越小,图片灰度越明显;
c.hue-rotate(deg)滤镜: 给图片应用色相旋转,0deg图片无变化,超过360deg的值相当于又绕一圈。

方法二:混合模式方案

原理:当两个元素叠加时,“混合模式” 控制了上层元素的颜色与下层颜色进行混合的方式。用它来实现染色效果时,需要用到混合模式是 luminosity 。 这种luminosity混合模式会保留上层元素的 HSL 亮度信息,并从它的下层吸取色相和饱和度信息。
混合模式的方式:对一个元素设置混合模式,有两个属性可以派上用场: mix-blend-mode 可以为整个元素设置混合模式;background-blend-mode 可以为每层背景单独指定混合模式。这意味着,如果用这个方案来处理图片,可以有两种选择:
a. 第一种选择: 需要把图片包裹在一个容器中,并把容器的背景设置为想要的主色调。
b. 第二种选择: 不用图片元素,而是用 div 元素,把这个元素的第一层背景设置为要染色的图片,并把第二层的背景设置为我们想要的主色调。
示例一:

示例二:

注:
a. 滤镜是可以做动画效果的,而混合模式不支持。所以这里 hover 的时候去改变背景色做出动画效果。
b. 当图像与透明混合的时候不会效果。

关于 mix-blend-mode 属性的取值有:


备注:图片来源谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复