我们在网站上有一个很大的应用程序,我们有一些链接,比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接,但是用浅一点的颜色。显然,我可以简单地通过在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
}

有没有办法将颜色减少一个百分比?


当前回答

如果您需要为了旧的浏览器兼容性而强制使用它,您可以使用Colllor自动选择类似的颜色变化。

示例(颜色:#a9dbb4):

其他回答

你可以在所有现代浏览器中使用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;

但我不确定你是这个意思。定义“减色”:透明?或者加白色?

HSL Colors提供了答案, HSL颜色值指定为:HSL (hue[0,255],饱和度%,明度%)。

HSL支持IE9+、Firefox、Chrome、Safari和Opera 10+

a
{
color:hsl(240,65%,50%);
}
a.lighter 
{
color:hsl(240,65%,75%);
}

我正在使用原始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代码。

一个过时的简单答案(在2013年)是在颜色上使用50%透明的白色PNG:

div {
    background-color:red;
}

div:hover {
    background-image:url('lighten.png');
}

其中light . PNG是一个白色填充的PNG,透明度为50%。

现在有更好的方法。我希望人们现在停止评论。