我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在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代码。
其他回答
存在“不透明度” 这将使背景闪闪发光:
opacity: 0.5;
但我不确定你是这个意思。定义“减色”:透明?或者加白色?
这是一个老问题，但大多数答案都需要使用预处理器或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>
据我所知，在CSS中没有办法做到这一点。
但我认为一点服务器端逻辑就可以很容易地实现您的建议。CSS样式表通常是静态资产，但没有理由不能由服务器端代码动态生成。您的服务器端脚本将:
检查URL参数以确定用户，从而确定用户选择的颜色。使用URL参数而不是会话变量，这样您仍然可以缓存CSS。 把颜色分成红、绿、蓝三部分 三个组成部分分别增加一个固定的数量。用这个方法进行实验，得到你想要的结果。 生成包含新颜色的CSS
到这个css生成页面的链接看起来像这样:
<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">
如果您不使用. CSS扩展名，请确保正确设置mime类型，以便浏览器知道将文件解释为CSS。
(注意，要使颜色变浅，你必须提高每个RGB值)
如果你决定使用http://compass-style.org/，一个基于sass的CSS框架，它提供了非常有用的darken()和lighter () sass函数来动态生成CSS。它非常干净:
@import compass/utilities
$link_color: #bb8f8f
a
color: $link_color
a:visited
color: $link_color
a:hover
color: darken($link_color,10)
生成
a {
color: #bb8f8f;
}
a:visited {
color: #bb8f8f;
}
a:hover {
color: #a86f6f;
}
您可以使用一点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)) );
};
