我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在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
}
有没有办法将颜色减少一个百分比?
当前回答
使用filter pure CSS属性。要获得过滤器属性函数的完整描述，请阅读这篇很棒的文章。
我也有和你一样的问题，我通过使用滤镜属性的亮度功能来修复它:
.my-class {
background-color: #18d176;
filter: brightness(90%);
}
其他回答
你可以在所有现代浏览器中使用CSS过滤器(参见caniuse兼容性表)。
.button { 颜色:# ff0000; ｝ /*注:100%为基线，85%略暗， 20%的颜色要深得多*/ .button:{徘徊 过滤器:亮度(85%); ｝ <button class="button">Foo lorem ipsum</button>
这里有更多关于你可以使用的各种过滤器的CSS技巧:https://css-tricks.com/almanac/properties/f/filter/
请看我对Ctford回复的评论。
我认为使颜色变亮的简单方法是将每个RGB组件加到0xff并除以2。如果这不能给出你想要的确切结果，用0xff减去当前值乘以某个常数，然后加回当前值。例如，如果你想向白色方向移动1/3，取(0xff - current)/3+current。
你得先试一下，看看结果如何。我担心，根据这个简单的公式，一个大到足以使深色颜色很好地褪色的因素可能会使浅色颜色完全变白，而一个小到足以使浅色颜色只变亮一点的因素可能会使深色颜色不够亮。
尽管如此，我还是认为，与固定步数相比，向白色移动一小部分距离更有希望。
如果您需要为了旧的浏览器兼容性而强制使用它，您可以使用Colllor自动选择类似的颜色变化。
示例(颜色:#a9dbb4):
Try:
a {
color: hsl(240, 100%, 50%);
}
a:hover {
color: hsl(240, 100%, 70%);
}
我知道已经很晚了，但是，你可以使用一个包装器来改变你的按钮和rgba颜色函数的不透明度级别，正如在其他答案中所说，但没有明确的例子。
这是一支笔:
https://codepen.io/aronkof/pen/WzGmjR
#wrapper { width: 50vw; height: 50vh; background-color: #AAA; margin: 20px auto; border-radius: 5px; display: grid; place-items: center; } .btn-wrap { background-color: #000; display: inline-block; } button { transition: all 0.6s linear; background-color: rgba(0, 255, 0, 1); border: none; outline: none; color: #fff; padding: 50px; font-weight: 700; font-size: 2em; } button:hover { background-color: rgba(0, 255, 0, .5); } <div id="wrapper"> <div class="btn-wrap"> <button class="btn">HEY!</buutton> </div> </div>
