我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在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
}
有没有办法将颜色减少一个百分比?
当前回答
你可以在所有现代浏览器中使用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/
其他回答
存在“不透明度” 这将使背景闪闪发光:
opacity: 0.5;
但我不确定你是这个意思。定义“减色”:透明?或者加白色?
据我所知，在CSS中没有办法做到这一点。
但我认为一点服务器端逻辑就可以很容易地实现您的建议。CSS样式表通常是静态资产，但没有理由不能由服务器端代码动态生成。您的服务器端脚本将:
检查URL参数以确定用户，从而确定用户选择的颜色。使用URL参数而不是会话变量，这样您仍然可以缓存CSS。 把颜色分成红、绿、蓝三部分 三个组成部分分别增加一个固定的数量。用这个方法进行实验，得到你想要的结果。 生成包含新颜色的CSS
到这个css生成页面的链接看起来像这样:
<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">
如果您不使用. CSS扩展名，请确保正确设置mime类型，以便浏览器知道将文件解释为CSS。
(注意，要使颜色变浅，你必须提高每个RGB值)
不直接，不。但是你可以使用一个网站，比如colorschemedesigner.com，它会给你基本颜色，然后给你不同范围的基本颜色的十六进制和rgb代码。
一旦我找到了我的网站配色方案，我就把颜色的十六进制代码放在样式表顶部的评论部分中并命名它们。
其他一些配色方案生成器包括:
http://www.colorschemer.com/online.html http://colorschemegenerator.com/ http://www.cssjuice.com/25-popular-color-scheme-and-palette-generators/
请看我对Ctford回复的评论。
我认为使颜色变亮的简单方法是将每个RGB组件加到0xff并除以2。如果这不能给出你想要的确切结果，用0xff减去当前值乘以某个常数，然后加回当前值。例如，如果你想向白色方向移动1/3，取(0xff - current)/3+current。
你得先试一下，看看结果如何。我担心，根据这个简单的公式，一个大到足以使深色颜色很好地褪色的因素可能会使浅色颜色完全变白，而一个小到足以使浅色颜色只变亮一点的因素可能会使深色颜色不够亮。
尽管如此，我还是认为，与固定步数相比，向白色移动一小部分距离更有希望。
如果你只需要改变背景颜色，这是一个很好的方法，是万无一失的-在背景图像上使用线性梯度方法!
看看下面的例子:
document .getElementById('colorpicker') .addEventListener('change', function(event) { document .documentElement .style.setProperty('--color', event.target.value); }); span { display: inline-block; border-radius: 20px; height: 40px; width: 40px; vertical-align: middle; } .red { background-color: red; } .red-darker { background: linear-gradient( to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) ) red; } :root { --color: lime; } .dynamic-color { background-color: var(--color); } .dynamic-color-darker { background: linear-gradient( to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) ) var(--color); } <table> <tr> <td><strong>Static Color</strong></td> <td><span class="red"></span></td> <td><span class="red-darker"></span></td> </tr> <tr> <td><strong>Dynamic Color</strong></td> <td><span class="dynamic-color"></span></td> <td><span class="dynamic-color-darker"></span></td> </tr> </table> <br/> Change the dynamic color: <input id="colorpicker" value="#00ff00" type="color"/>
学分:https://css-tricks.com/css-custom-properties-theming/
