我可以更改 CSS 中颜色的单个参数吗？

Posted 2023-02-21

【中文标题】我可以更改 CSS 中颜色的单个参数吗？

【英文标题】：Can I change a single parameter of a colour in CSS?

【发布时间】：2013-04-14 21:46:51

【问题描述】：

当我在 Adob​​e Illustrator 中设计东西时，我喜欢选择一种颜色，然后调整它的亮度或饱和度，让自己成为“同族”的相似颜色。

在CSS中，你可以用这些值来定义颜色：RGB、RGBA、HSL……既然你可以同时定义所有三个参数，我想了很久：有没有办法改变一个那些单参数？

例如，假设我将三个链接定义为具有非常“漂亮”的颜色 #FF0000、#00FF00 和 #0000FF。是否可以创建一个单一的 CSS 规则来说明“在所有链接悬停时，无论其颜色如何，将其亮度/亮度降低 10%”？

我也很想对 RGBA 颜色的 alpha 参数做同样的事情。我所知道的唯一一种不加选择地影响所有颜色的通用方法是 opacity 属性，但如果我只想影响背景，这就会变成一个问题。

这样的事情（仅影响 H、S 或 L）听起来很简单：如果您可以重新定义整个颜色，您就不能再次采用相同的颜色并更改其中一个值吗？但问题是：有没有人想过真正想办法做到这一点？

【问题讨论】：

CSS 本身无法做到这一点，但 SASS 和其他一些 CSS 预处理器可以。 sass-lang.com/docs/yardoc/Sass/Script/…

^为什么这不是一个答案？它似乎比下面的任何东西都更充分、更简洁。

【参考方案1】：

我建议研究 SASS 和 LESS，它们可以为您完成此任务以及更多。

http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

或者您可以使用 jQuery 来完成此操作，如以下问题所述：

Increase CSS brightness color on click with jquery/javascript?

【讨论】：

您不应该只链接到文章。你需要解释你的答案

【参考方案2】：

您可以使用 rgba 值并调整不透明度来获得类似的效果。例如：

color: rgba(0, 0, 0, 1.0);

这代表纯黑色。括号中的最后一位数字会影响不透明度。您可以将其从 1.0 调整为 0.5 以获得更浅的颜色（假设文本后面是浅色背景）。

当我懒得获取灰色阴影的特定十六进制值时，我经常这样做（但它也适用于任何颜色）。

【讨论】：

但是如果我做“颜色：#FF0000;”然后，我做“颜色：rgba（0,0,0,0.5）；”我不会变成浅红色，是吗？我变灰了。如果我使用“不透明度：0.5;”那么背景颜色或图像也会变得透明。

你是对的。要按照我的建议进行操作，您可以从 color: rgba(255, 0, 0, 1.0); 开始——您以后的样式，对于 :hover 或其他内容，将是 color: rgba(255, 0, 0, 0.5); 等。

这不是我要找的。我正在寻找可以同时影响绿色和红色元素并使它们都变暗的东西。

我想我明白了。也许不是你要找的东西，但 CSS 过滤器可能会起作用。尝试取消注释此小提琴中的某些行。 jsfiddle.net/MRSallee/zTtEd/1

这有点像，尽管您不能用它来严格指定背景颜色或颜色。听起来很有用。虽然目前还没有得到广泛的支持~。有趣的是，CSS 过滤器仅适用于 Chrome，而 SVG 过滤器仅适用于 Firefox。