这篇文章主要为大家展示了“css如何使用颜色函数”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css如何使用颜色函数”这篇文章吧。
我们可能已经很熟悉 Hex、RGB 和 HSL 颜色格式。CSS Color Module Levels 4 和 5 中包括一整套新的颜色函数,使我们能够以前所未有的方式在 CSS 中指定和操作颜色。它们包括:
hwb():色相、白度、黑度。
lab():亮度以及决定色调的 a和b值。
lch():亮度、色度、色调。
color-mix():将两种颜色混合在一起。
color-contrast():从颜色列表中,输出与第一个参数相比对比度最高的颜色。
color():指定不同颜色空间中的颜色(例如display-p3)。
hwb(), lab() 和 lch() 的使用方式与我 rgb() 和 hsl() 函数基本相同,都有一个可选的alpha 参数:
.my-element { background-color: lch(80% 100 50); } .my-element { background-color: lch(80% 100 50 / 0.5); }
color-mix() 将其他两种颜色混合后输出一种颜色。我们需要指定颜色插值方法作为第一个参数:
.my-element { background-color: color-mix(in lch, blue, lime); }
color-contrast() 需要一个基色来比较其他颜色。它将输出对比度最高的颜色,或者在提供额外关键字的情况下,输出列表中符合相应对比度的第一种颜色:
/* 输出对比度最高的颜色 */ .my-element { color: white; background-color: color-contrast(white vs, lightblue, lime, blue); } /* 输出符合AA对比度的第一种颜色 */ .my-element { color: white; background-color: color-contrast(white vs, lightblue, lime, blue to AA); }
Safari 目前在浏览器支持方面处于领先地位,从版本 15 就开始支持hwb()、 lch()、lab()、color(),color-mix() 和 color-contrast() 可以通过 flag 启用。Firefox 支持 hwb(),并且还标记了对 color-mix() 和 color-contrast() 的支持。令人惊讶的是,Chrome 现在还不支持这些函数。
在代码中提供样式兼容并不难:给定两种颜色规则,如果浏览器不支持第二种颜色规则,它将忽略第二种颜色规则:
.my-element { background-color: rgb(84.08% 0% 77.36%); background-color: lch(50% 100 331); }
这样,当浏览器支持该函数时,就可以直接使用了。
以上是“css如何使用颜色函数”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。