我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在CSS文件中添加十六进制代码来做，但我们的网站让用户决定他们想要的自定义配置文件/网站(如Twitter)的颜色。
所以，我的问题是:我们能减少百分比的颜色吗?
让我们说下面的代码是CSS:
a {
color: blue;
}
a.lighter {
color: -50%; // obviously not correct way, but just an idea
}
OR
a.lighter {
color: blue -50%; // again not correct, but another example of setting color and then reducing it
}
有没有办法将颜色减少一个百分比?
当前回答
您可以使用RGBa(“a”是alpha透明度)，但它还没有得到广泛支持。不过，它将是，所以你现在可以使用它，并添加一个备用方案:
a:link {
color: rgb(0,0,255);
}
a:link.lighter {
color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */
}
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
color: rgba(0,0,255,0.5); /* last value is transparency */
}
其他回答
我找到了一个PHP类，它可以让我在服务器端执行此操作。我只是输出一个内联CSS颜色样式，无论我需要更亮/更暗。伟大的工作。
http://www.barelyfitz.com/projects/csscolor/
(注意，这个类使用PEAR来抛出错误，但我不想只包括PEAR来修改颜色，所以我只是删除了所有的PEAR引用)
我把它变成了一个带有静态方法的静态类，这样我就可以直接调用“变亮”和“变暗”函数，而不需要创建一个新对象。
示例用法:
$original_color = 'E58D8D';
$lighter_color = Css::lighten($original_color, .7);
$darker_color = Css::darken($original_color, .7);
请看我对Ctford回复的评论。
我认为使颜色变亮的简单方法是将每个RGB组件加到0xff并除以2。如果这不能给出你想要的确切结果，用0xff减去当前值乘以某个常数，然后加回当前值。例如，如果你想向白色方向移动1/3，取(0xff - current)/3+current。
你得先试一下，看看结果如何。我担心，根据这个简单的公式，一个大到足以使深色颜色很好地褪色的因素可能会使浅色颜色完全变白，而一个小到足以使浅色颜色只变亮一点的因素可能会使深色颜色不够亮。
尽管如此，我还是认为，与固定步数相比，向白色移动一小部分距离更有希望。
在写这篇文章的时候，这里是我发现的最好的纯CSS颜色操作实现:
使用CSS变量以HSL而不是HEX/RGB格式定义颜色，然后使用calc()来操作它们。
这里有一个基本的例子:
:root { --link-color-h: 211; --link-color-s: 100%; --link-color-l: 50%; --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l); --link-color: hsl(var(--link-color-hsl)); --link-color-10: hsla(var(--link-color-hsl), .1); --link-color-20: hsla(var(--link-color-hsl), .2); --link-color-30: hsla(var(--link-color-hsl), .3); --link-color-40: hsla(var(--link-color-hsl), .4); --link-color-50: hsla(var(--link-color-hsl), .5); --link-color-60: hsla(var(--link-color-hsl), .6); --link-color-70: hsla(var(--link-color-hsl), .7); --link-color-80: hsla(var(--link-color-hsl), .8); --link-color-90: hsla(var(--link-color-hsl), .9); --link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l)); --link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l)); --link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l)); --link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l)); --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9)); --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9)); } .flex { display: flex; } .flex > div { flex: 1; height: calc(100vw / 10); } <h3>Color Manipulation (alpha)</h3> <div class="flex"> <div style="background-color: var(--link-color-10)"></div> <div style="background-color: var(--link-color-20)"></div> <div style="background-color: var(--link-color-30)"></div> <div style="background-color: var(--link-color-40)"></div> <div style="background-color: var(--link-color-50)"></div> <div style="background-color: var(--link-color-60)"></div> <div style="background-color: var(--link-color-70)"></div> <div style="background-color: var(--link-color-80)"></div> <div style="background-color: var(--link-color-90)"></div> <div style="background-color: var(--link-color)"></div> </div> <h3>Color Manipulation (Hue)</h3> <div class="flex"> <div style="background-color: var(--link-color-warm)"></div> <div style="background-color: var(--link-color)"></div> <div style="background-color: var(--link-color-cold)"></div> </div> <h3>Color Manipulation (Saturation)</h3> <div class="flex"> <div style="background-color: var(--link-color)"></div> <div style="background-color: var(--link-color-low)"></div> <div style="background-color: var(--link-color-lowest)"></div> </div> <h3>Color Manipulation (Lightness)</h3> <div class="flex"> <div style="background-color: var(--link-color-light)"></div> <div style="background-color: var(--link-color)"></div> <div style="background-color: var(--link-color-dark)"></div> </div>
我还创建了一个CSS框架(仍处于早期阶段)来提供基本的CSS变量支持，称为根变量。
如果你想要更暗的颜色，你可以使用低不透明度的rgba黑色:
rgba(0, 0, 0, 0.3);
打火机用白色:
rgba(255, 255, 255, 0.3);
使用filter pure CSS属性。要获得过滤器属性函数的完整描述，请阅读这篇很棒的文章。
我也有和你一样的问题，我通过使用滤镜属性的亮度功能来修复它:
.my-class {
background-color: #18d176;
filter: brightness(90%);
}
