使用color-mod()函数修改颜色

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

去年@Erik Jung写了一篇文章来介绍CSS4 Color特性,那时并没有花时间去探讨其具体的使用方式,只是略知他能让你基于某个颜色,添加调节参数,得到新的颜色。由于其还是Color的新特性,所以目前如果不依赖于其他的手段,你在浏览器里是看不到效果的。当然也有非常出色的工程师,比如@Ahmad Shadeed写的一篇文章中,使用rgba()模拟出color-mod()函数的特性

特别声明,其实并没有什么CSS4一说,其只是Level 4的一种简称,比如这里所说的CSS4 Color,其实就是指CSS Color Module Level 4。为了好记,所以说是CSS4。有关于这方面的具体解释可以阅读《为什么没有CSS4:关于CSS等级的解释》一文。

昨天看到@Tyler Gaw使用React写的ColorMe,非常有意思,演示了color-mod()函数如何基于一个颜色,在不同条件下的变化。

ColorMe

这篇文章接下来要说的就是CSS Color Module Level 4中的color-mod。在具体介绍它之前,我们先简单的看看下面的录屏效果。通过ColorMe,基于#29B4F0颜色,调整不同的参数得出的颜色效果:

比如:

color(#29B4F0 a(63%) s(45%) h(176) l(54%) tint(39%) shade(63%) w(56%) b(73%) contrast(49%))

看到的效果:

看到上面一大串的代码值,我想你肯定想知道怎么使用这个属性。

color-mod()语法

规范中对color-mod()属性的语法是这样描述的:

color-mod() = color( [ <color> | <hue> ] <color-adjuster>* )
<color-adjuster> =
    [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] ) |
    [red( | green( | blue( | alpha( | a(] '*' <percentage> ) |
    rgb( ['+' | '-'] [<number> | <percentage>]{3} ) |
    rgb( ['+' | '-'] <hash-token> ) |
    rgb( '*' <percentage> ) |

    [hue( | h(] ['+' | '-' | '*']? <angle> ) |
    [saturation( | s(] ['+' | '-' | '*']? <percentage> ) |
    [lightness( | l(] ['+' | '-' | '*']? <percentage> ) |
    [whiteness( | w(] ['+' | '-' | '*']? <percentage> ) |
    [blackness( | b(] ['+' | '-' | '*']? <percen
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css4/color-mod.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部