我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在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
}
有没有办法将颜色减少一个百分比?
当前回答
我正在使用原始CSS3和SVG添加一个答案，不需要LESS或SASS。
基本上，如果问题是为了全局悬停效果而将颜色调亮10%、25%、50%或更暗，你可以像这样创建一个SVG数据调用
:root{
--lighten-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssLighten" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="white" width="50" height="50"/></svg>') !important;
--darken-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssDarken" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="black" width="50" height="50"/></svg>') !important;
}
.myButton{
color: white;
background-color:blue;
}
.myButton:hover{
background-image: var(--lighten-bg);
}
出于某种原因，我不知道，SVG不允许我在“填充”属性中输入十六进制值，但“白色”和“黑色”满足了我的需求。
发人深思: 如果你不介意使用图片，可以使用50%透明的PNG作为背景图片。如果您想要更花哨，可以调用一个PHP脚本作为背景图像，并将HEX和不透明度值传递给它，然后让它输出上面的SVG代码。
其他回答
你可以在所有现代浏览器中使用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/
一个过时的简单答案(在2013年)是在颜色上使用50%透明的白色PNG:
div {
background-color:red;
}
div:hover {
background-image:url('lighten.png');
}
其中light . PNG是一个白色填充的PNG，透明度为50%。
现在有更好的方法。我希望人们现在停止评论。
请看我对Ctford回复的评论。
我认为使颜色变亮的简单方法是将每个RGB组件加到0xff并除以2。如果这不能给出你想要的确切结果，用0xff减去当前值乘以某个常数，然后加回当前值。例如，如果你想向白色方向移动1/3，取(0xff - current)/3+current。
你得先试一下，看看结果如何。我担心，根据这个简单的公式，一个大到足以使深色颜色很好地褪色的因素可能会使浅色颜色完全变白，而一个小到足以使浅色颜色只变亮一点的因素可能会使深色颜色不够亮。
尽管如此，我还是认为，与固定步数相比，向白色移动一小部分距离更有希望。
如果您需要为了旧的浏览器兼容性而强制使用它，您可以使用Colllor自动选择类似的颜色变化。
示例(颜色:#a9dbb4):
我找到了一个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);
