嘿,各位开发者!今天,我们将深入 CSS 颜色函数的世界。 您可能使用过 CSS 来更改网页上元素的颜色,但是您听说过 CSS 颜色函数吗?如果没有,请系好安全带,因为您将学到新的且非常有用的东西! 让我们从我昨天读到的一句话开始 . 好书 色彩是键盘,眼睛是和声,灵魂是多弦琴。艺术家是演奏的手,触摸一个或另一个键,引起灵魂的振动。 CSS 颜色函数到底是什么? CSS 颜色函数是一种在 CSS 中使用数学函数指定颜色的方法,而不仅仅是简单的颜色代码。 这些函数提供了对样式表中使用的颜色的更多控制和灵活性。 使用颜色函数,您可以调整颜色的 、 、 和 ,甚至可以将两种或多种颜色混合在一起。 色调 饱和度 亮度 不透明度 有多个 CSS 函数可用,让我们看一些: - 它采用三个值,分别代表红色、绿色和蓝色,并返回一种颜色。值的范围为 0 到 255。示例: 产生红色。 rgb() color: rgb(255, 0, 0) - 它类似于 ,但它还允许您设置颜色的不透明度。第四个值 alpha,范围从 0 到 1。示例: 产生半透明的红色。 rgba() rgb() color: rgba(255, 0, 0, 0.5) - 它采用三个值,分别表示色调、饱和度和亮度,并返回一种颜色。示例: 产生红色。 hsl() color: hsl(0, 100%, 50%) - 它类似于 ,但它还允许您设置颜色的不透明度。示例: 产生半透明的红色。 hsla() hsl() color: hsla(0, 100%, 50%, 0.5) - 它允许您使用可选的权重参数将两种颜色混合在一起。示例: 产生紫色阴影。 mix() color: mix(red, blue) 让我们详细了解它们。 红绿蓝() 好吧,让我们继续探索 CSS 颜色函数的世界,深入了解 RGB 函数。 RGB 函数是 CSS 中最常用的颜色函数之一,这是有充分理由的! 它很容易理解,并且可以让您更好地控制您在网站上使用的颜色。 RGB 函数取三个值,每个值代表 红色的, 绿色,和 分别为蓝色。 这些值的范围可以从 0 到 255。通过混合不同强度的红色、绿色和蓝色,您可以创建任何您喜欢的颜色。 例子: 对于红色 - rgb(255, 0, 0) 对于绿色 - rgb(0, 255, 0) 对于蓝色 - rgb(0, 0, 255) div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/ 国标() 好吧,让我们继续学习 CSS 中另一个有用的颜色函数——HSL 函数! HSL 函数类似于 RGB 函数,但它不使用红色、绿色和蓝色的值,而是使用以下值: 色调, 饱和度,和 亮度。 这使得它更容易理解和使用,特别是对于那些刚接触 . 色彩理论 HSL 函数中的 hue 值表示 ,取值范围为 0 到 360。 颜色本身 0 表示红色,色调值 120 表示绿色,色调值 240 表示蓝色。 色调值 HSL 函数中的 表示颜色的强度,取值范围为 0% 到 100%。饱和度值为 100% 表示颜色完全饱和,而值为 0% 表示颜色为灰色。 饱和度值 HSL函数中的 表示颜色的亮度,取值范围为0%到100%。亮度值为 表示颜色为 ,值为 表示颜色为 值为 表示颜色为 。 明度值 50% 中性灰色 100% 全亮, 0% 全暗 div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */ RGBA() 好了伙计们,让我们来谈谈RGBA功能吧! RGBA 函数就像 RGB 函数一样,但有一个额外的好处: 它允许您指定颜色的 。 不透明度 当您想为元素创建 时,例如当您希望背景颜色部分透明时,这会派上用场。 半透明效果 RGBA 函数有四个值,前三个是红色、绿色和蓝色值,就像 RGB 函数一样。 第四个值是 ,代表颜色的不透明度,取值范围为 0 到 1。 alpha 值 值为 0 表示颜色完全透明,而值为 1 表示颜色完全不透明。 div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */ 高密度脂蛋白() 好了伙计们,我们来谈谈 HSLA 功能吧! HSLA 函数与 HSL 函数一样,但有一个额外的好处:它允许您指定颜色的不透明度。 当您想为元素创建 时,例如当您希望背景颜色部分透明时,这会派上用场。 半透明效果 HSLA 函数有四个值,前三个是色调、饱和度和亮度值,就像 HSL 函数一样。 第四个值是 alpha 值,代表颜色的不透明度,取值范围为 0 到 1。 值为 0 表示颜色完全透明,而值为 1 表示颜色完全不透明。 div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */ 都是一样的 A 表示 Alpha 是我们(alpha 值为 0.75)为两个函数中的半透明效果而编辑的,很简单。 自定义属性或 CSS 变量 现在,我们来谈谈 CSS 中的自定义属性,也称为 CSS 变量。自定义属性允许您存储可在整个样式表中重复使用的值,从而更容易维护您的样式并使您的代码更易于使用 灵活。 模块化的 要创建自定义属性,您只需使用 语法后跟属性名称,然后是值 -- :root { --primary-color: blue; } 在这里,我们创建了一个名为 自定义属性,其值为 。 --primary-color blue 现在,要使用此自定义属性,您可以在 CSS 选择器中使用 函数。 var() button { background-color: var(--primary-color); } 上面的代码将所有 元素的背景颜色设置为蓝色,因为我们使用了自定义属性 。 <button> --primary-color 如果我们要改变 的值,我们只需要改变一个地方,它会自动更新整个 . --primary-color 样式表 使用自定义属性的优点包括: :无需在整个样式表中重复值,您可以将值存储在自定义属性中并根据需要重用它们。 代码重用 :自定义属性可以更轻松地维护您的样式,因为您只需要在一个地方更新值。 可维护性 :自定义属性允许您通过更改一个位置的值来更改站点的外观,而不是在多个选择器中进行更改。 灵活性 CSS 颜色函数最佳实践 好吧,让我们谈谈在项目中使用 CSS 颜色函数的最佳实践。 这些技巧将帮助您创建一致且具有视觉吸引力的 用于您的网站,并确保所有用户都可以阅读和访问您的颜色。 调色板 为您的网站创建调色板: 使用 CSS 颜色时,您应该做的第一件事就是为您的网站创建一个调色板。这可以很简单,只需选择几种您喜欢的并且可以很好地搭配的颜色。 您可以使用 RGB、HSL、RGBA 或 HSLA 函数来定义颜色。 一个好的开始是选择一种主色,然后选择 2-3 种强调色来补充它。 :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); } 使用 CSS 颜色函数进行对比和层次结构: 使用颜色在您的设计中创建对比度和层次结构非常重要。例如,您可以为背景使用较浅的颜色,为文本使用较深的颜色,以确保其易于阅读。 您还可以使用颜色来吸引对特定元素的注意,例如按钮或链接。 body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); } 测试颜色函数的可读性和可访问性: 最后,测试颜色的可读性和可访问性很重要。确保您的颜色具有足够的对比度以便于阅读,尤其是对于有色觉缺陷的用户。 您可以使用在线工具检查颜色的对比度并确保它们符合无障碍标准。 WebAIM 对比度检查器 Muzli 调色板生成器 Experte - 对比度检查器 coolors - 调色板生成器 Canva 调色板生成器 CSS 颜色函数高级技术 在本节中,我们将深入探讨一些使用 CSS 颜色函数的高级技术。 将 CSS 变量用于动态配色方案 您是否曾经想只用几行代码来改变您网站的配色方案?使用 CSS 变量,也称为自定义属性,您可以! 您可以创建一组变量来存储您的调色板,然后在整个样式表中使用它们。 这样,如果您想更改配色方案,只需更新变量中的值即可。 :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); } 在这个例子中,我们为我们的主要颜色和次要颜色创建了两个自定义属性。然后我们使用它们来设计我们的 和 元素。 h1 button 使用 CSS 颜色函数创建动画 使用 CSS 颜色函数可以做的一件很酷的事情就是为它们设置动画!您可以在颜色之间创建平滑过渡,为您的网站增添一些活力。例如,您可以让按钮在用户将鼠标悬停在按钮上时改变颜色。 button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); } 在这里,我们将按钮的默认背景颜色设置为绿色色调 ( 并添加了过渡效果,以便在将鼠标悬停在按钮上时使颜色平滑变化。 hsl(120, 100%, 50%) 我们将悬停状态的颜色更改为蓝色 ( )。 hsl(240, 100%, 50%) 使用 CSS 颜色函数实现渐变和透明度 使用 CSS 颜色函数可以做的另一件有趣的事情是创建渐变和透明度。您可以使用 RGBA 和 HSLA 颜色函数创建半透明颜色,然后将它们组合以创建渐变。 .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); } 在这里,我们创建了一个从红色 RGBA 颜色到绿色 HSLA 颜色的线性渐变。两种颜色的 alpha 值为 0.5,使它们成为半透明的。 你有它! 一些具有 CSS 颜色功能的高级技术。体验这些技巧的乐趣,尽情发挥您的创造力吧! 资源 caniuse.com [支持 HTML5、CSS3 的表格] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl https://developer.mozilla.org/en-US/docs/Web/CSS/color_value 结论 总之,我希望这篇介绍对您开始使用 CSS 颜色函数和自定义属性有所帮助。 这些功能强大的工具可以使您的 CSS 代码更加灵活、可维护且更易于使用。编码愉快!