温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css如何使用颜色函数

发布时间:2022-03-17 11:09:36 来源:亿速云 阅读:758 作者:小新 栏目:开发技术

这篇文章主要为大家展示了“css如何使用颜色函数”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css如何使用颜色函数”这篇文章吧。

颜色函数

1. 基本概念

我们可能已经很熟悉 Hex、RGB 和 HSL 颜色格式。CSS Color Module Levels 4 和 5 中包括一整套新的颜色函数,使我们能够以前所未有的方式在 CSS 中指定和操作颜色。它们包括:

  • hwb():色相、白度、黑度。

  • lab():亮度以及决定色调的 a和b值。

  • lch():亮度、色度、色调。

  • color-mix():将两种颜色混合在一起。

  • color-contrast():从颜色列表中,输出与第一个参数相比对比度最高的颜色。

  • color():指定不同颜色空间中的颜色(例如display-p3)。

2. 使用方法

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);
}

3. 当前状态

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如何使用颜色函数”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI