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

Question

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

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

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

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

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

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

2 回答 2