我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在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
}
有没有办法将颜色减少一个百分比?
当前回答
这是一个老问题，但大多数答案都需要使用预处理器或JavaScript来操作，否则它们不仅会影响元素的颜色，还会影响其中包含的元素的颜色。我将添加一种复杂的css方式来做同样的事情。也许在未来，随着更高级的CSS功能，这将更容易做到。
这个想法是基于使用:
RGB颜色，所以你有单独的值红，绿，蓝; CSS变量，用来存储颜色值和暗度;而且 calc函数，以应用更改。
默认情况下，暗度为1(对于100%，常规颜色)，如果您乘以0到1之间的数字，您将使颜色变深。例如，如果您将每个值乘以0.85，您将使颜色暗15%(100% - 15% = 85% = 0.85)。
下面是一个例子，我创建了三个类:.dark， .dark和.darkest，这将使原始颜色分别暗25%，50%和75%:
html { --clarity: 1; } div { display: inline-block; height: 100px; width: 100px; line-height: 100px; color: white; text-align: center; font-family: arial, sans-serif; font-size: 20px; background: rgba( calc(var(--r) * var(--clarity)), calc(var(--g) * var(--clarity)), calc(var(--b) * var(--clarity)) ); } .dark { --clarity: 0.75; } .darker { --clarity: 0.50; } .darkest { --clarity: 0.25; } .red { --r: 255; --g: 0; --b: 0; } .purple { --r: 205; --g: 30; --b: 205; } <div class="red">0%</div> <div class="red dark">25%</div> <div class="red darker">50%</div> <div class="red darkest">75%</div> <br/><br/> <div class="purple">0%</div> <div class="purple dark">25%</div> <div class="purple darker">50%</div> <div class="purple darkest">75%</div>
其他回答
存在“不透明度” 这将使背景闪闪发光:
opacity: 0.5;
但我不确定你是这个意思。定义“减色”:透明?或者加白色?
请看我对Ctford回复的评论。
我认为使颜色变亮的简单方法是将每个RGB组件加到0xff并除以2。如果这不能给出你想要的确切结果，用0xff减去当前值乘以某个常数，然后加回当前值。例如，如果你想向白色方向移动1/3，取(0xff - current)/3+current。
你得先试一下，看看结果如何。我担心，根据这个简单的公式，一个大到足以使深色颜色很好地褪色的因素可能会使浅色颜色完全变白，而一个小到足以使浅色颜色只变亮一点的因素可能会使深色颜色不够亮。
尽管如此，我还是认为，与固定步数相比，向白色移动一小部分距离更有希望。
您可以使用一点javascript来计算使用rgb()的较深和较浅的颜色。
提琴:不是很好，但这只是为了说明。
它本质上所做的是设置一个颜色，并选择20个rgb相同数量的颜色(相互比较)，仅相隔10个。
for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
var r = 91;
var g = 192;
var b = 222;
$('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+ (i*10)) );
};
一个过时的简单答案(在2013年)是在颜色上使用50%透明的白色PNG:
div {
background-color:red;
}
div:hover {
background-image:url('lighten.png');
}
其中light . PNG是一个白色填充的PNG，透明度为50%。
现在有更好的方法。我希望人们现在停止评论。
这是一个老问题，但大多数答案都需要使用预处理器或JavaScript来操作，否则它们不仅会影响元素的颜色，还会影响其中包含的元素的颜色。我将添加一种复杂的css方式来做同样的事情。也许在未来，随着更高级的CSS功能，这将更容易做到。
这个想法是基于使用:
RGB颜色，所以你有单独的值红，绿，蓝; CSS变量，用来存储颜色值和暗度;而且 calc函数，以应用更改。
默认情况下，暗度为1(对于100%，常规颜色)，如果您乘以0到1之间的数字，您将使颜色变深。例如，如果您将每个值乘以0.85，您将使颜色暗15%(100% - 15% = 85% = 0.85)。
下面是一个例子，我创建了三个类:.dark， .dark和.darkest，这将使原始颜色分别暗25%，50%和75%:
html { --clarity: 1; } div { display: inline-block; height: 100px; width: 100px; line-height: 100px; color: white; text-align: center; font-family: arial, sans-serif; font-size: 20px; background: rgba( calc(var(--r) * var(--clarity)), calc(var(--g) * var(--clarity)), calc(var(--b) * var(--clarity)) ); } .dark { --clarity: 0.75; } .darker { --clarity: 0.50; } .darkest { --clarity: 0.25; } .red { --r: 255; --g: 0; --b: 0; } .purple { --r: 205; --g: 30; --b: 205; } <div class="red">0%</div> <div class="red dark">25%</div> <div class="red darker">50%</div> <div class="red darkest">75%</div> <br/><br/> <div class="purple">0%</div> <div class="purple dark">25%</div> <div class="purple darker">50%</div> <div class="purple darkest">75%</div>
