2013-04-22 60 views
0

当我在Adobe Illustrator中设计事物时,我喜欢挑选一种颜色,然后播放其亮度或饱和度,以使自己具有与“同一家族”相似的颜色。我可以在CSS中更改颜色的单个参数吗?

在CSS中,您可以使用以下类型的值定义颜色:RGB,RGBA,HSL ...既然您可以同时定义所有三个参数,我一直在想很久:有没有办法改变那些单参数?

例如,假设我将三个链接定义为具有非常“漂亮”的颜色#FF0000,#00FF00和#0000FF。是否有可能创建一个单独的CSS规则,可以说“悬停所有链接,不管它们的颜色,将亮度/亮度降低10%”?

我非常想用RGBA颜色的alpha参数来做同样的事情。我知道唯一不分青红皂白地影响所有颜色的这种一般方式就是不透明属性,但如果我只想影响背景就会变成问题。

这样的事情(只影响H,S或L)听起来相当直接:如果你可以重新定义整个颜色,你不能只是再次采用相同的颜色并改变它的一个值吗?但问题是:有人想过实际上有办法做到这一点?

+0

CSS本身不能做到,但SASS和其他一些CSS预处理器可以。 http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#lighten-instance_method – 2013-04-22 04:39:48

+0

^为什么这不是一个答案?它似乎比下面的任何内容都更加充实,更简洁。 – Ariane 2013-04-22 05:19:07

回答

1

你可以使用RGBA值并调整透明度得到类似的效果。例如:

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

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

我经常这样做,当我懒得到灰色阴影的特定十六进制值(但它也可以使用任何颜色)。

+0

但是如果我做“颜色:#FF0000;”然后,我做“color:rgba(0,0,0,0.5);”我不会浅红,是吗?我灰色。如果我使用“不透明度:0.5;”那么背景颜色或图像也将变得透明。 – Ariane 2013-04-22 05:18:20

+0

你是对的。要做我建议的事情,你可以从'color:rgba(255,0,0,1.0)开始;' - 你后来的样式,用于:悬停或其他,然后是'color:rgba(255, 0,0,0.5);'等 – 2013-04-22 05:20:59

+0

这不是我要找的。我正在寻找能够影响绿色和红色元素的东西,并将它们渲染得更暗。 – Ariane 2013-04-22 06:36:51

相关问题