我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在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中没有办法做到这一点。
但我认为一点服务器端逻辑就可以很容易地实现您的建议。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。
你得先试一下，看看结果如何。我担心，根据这个简单的公式，一个大到足以使深色颜色很好地褪色的因素可能会使浅色颜色完全变白，而一个小到足以使浅色颜色只变亮一点的因素可能会使深色颜色不够亮。
尽管如此，我还是认为，与固定步数相比，向白色移动一小部分距离更有希望。
您可以使用RGBa(“a”是alpha透明度)，但它还没有得到广泛支持。不过，它将是，所以你现在可以使用它，并添加一个备用方案:
a:link {
color: rgb(0,0,255);
}
a:link.lighter {
color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */
}
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
color: rgba(0,0,255,0.5); /* last value is transparency */
}
自2020年1月以来，所有现代浏览器都支持100%的过滤器。甚至UC浏览器的Android(而不是Chrome，在80美元的手机上)也支持它。
a {
/* a nice, modern blue for links */
color: #118bee;
}
a:active {
/* Darken on click by 15% (down to 85%) */
filter: brightness(0.85);
}
此外，你可以用CSS变量动态控制这一点，自2017年10月以来，大多数浏览器(不包括QQ)都支持CSS变量:
:root {
--color: #118bee;
--hover-brightness: 1.2;
}
a {
color: var(--color);
}
a:active {
/* Darken on click */
filter: brightness(var(--hover-brightness));
}
不是我的项目，但有一个很好的例子，可以看到现代CSS是多么伟大，看看:MVP.css
原来的答案
如果你使用的堆栈允许你使用Sass或Less，你可以使用点亮函数:
$linkcolour: #0000FF;
a {
color: $linkcolour;
}
a.lighter {
color: lighten($linkcolour, 50%);
}
还有一种暗色调，效果相同，但方向相反。
如果你决定使用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;
}
我找到了一个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);
如果你想要更暗的颜色，你可以使用低不透明度的rgba黑色:
rgba(0, 0, 0, 0.3);
打火机用白色:
rgba(255, 255, 255, 0.3);
一个过时的简单答案(在2013年)是在颜色上使用50%透明的白色PNG:
div {
background-color:red;
}
div:hover {
background-image:url('lighten.png');
}
其中light . PNG是一个白色填充的PNG，透明度为50%。
现在有更好的方法。我希望人们现在停止评论。
您可以使用一点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)) );
};
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%);
}
在LESS中，你可以使用以下变量:
@primary-color: #999;
@primary-color-lighter: lighten(@primary-color, 20%);
这将使第一个变量减轻20%(或任何其他百分比)。在这个例子中，你最终会得到较浅的颜色:#ccc
你可以在所有现代浏览器中使用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/
把它们结合在一起，一个纯粹用DIV和CSS做的表解决方案，试试吧;)浏览器应该通过....支持RGBA颜色
<head>
<style>
.colored-div-table {
display: table;
table-layout: fixed;
}
.colored-div-table #col {
display: table-column;
}
.colored-div-table #col:nth-child(odd) {
}
.colored-div-table #col:nth-child(even) {
}
.colored-div-table #col:nth-child(1){
background-color: lightblue;
width: 50px !important;
}
.colored-div-table #col:nth-child(2){
background-color: lightyellow;
width: 200px !important;
}
.colored-div-table #col:nth-child(3){
background-color: lightcyan;
width: 50px !important;
}
.colored-div-table #row {
display: table-row;
}
.colored-div-table #row div {
display: table-cell;
}
.colored-div-table #row div:nth-child(1) {
}
.colored-div-table #row div:nth-child(2) {
}
.colored-div-table #row div:nth-child(3) {
}
.colored-div-table #row:nth-child(odd) {
background-color: rgba(0,0,0,0.1)
}
.colored-div-table #row:nth-child(even) {
}
</style>
</head>
<body>
<div id="divtable" class="colored-div-table">
<div id="col"></div>
<div id="col"></div>
<div id="col"></div>
<div id="row">
<div>First Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Second Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Third Line</div><div>TL C2</div><div>TL C3></div>
</div>
<div id="row">
<div>Forth Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Fifth Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Sixth Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Seventh Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Eight Line</div><div>EL C2</div><div>EL C3></div>
</div>
<div id="row">
<div>Nineth Line</div><div>NL C2</div><div>NL C3></div>
</div>
<div id="row">
<div>Tenth Line</div><div>TL C2</div><div>TL C3></div>
</div>
</div>
</body>
我知道已经很晚了，但是，你可以使用一个包装器来改变你的按钮和rgba颜色函数的不透明度级别，正如在其他答案中所说，但没有明确的例子。
这是一支笔:
https://codepen.io/aronkof/pen/WzGmjR
#wrapper { width: 50vw; height: 50vh; background-color: #AAA; margin: 20px auto; border-radius: 5px; display: grid; place-items: center; } .btn-wrap { background-color: #000; display: inline-block; } button { transition: all 0.6s linear; background-color: rgba(0, 255, 0, 1); border: none; outline: none; color: #fff; padding: 50px; font-weight: 700; font-size: 2em; } button:hover { background-color: rgba(0, 255, 0, .5); } <div id="wrapper"> <div class="btn-wrap"> <button class="btn">HEY!</buutton> </div> </div>
如果你只需要改变背景颜色，这是一个很好的方法，是万无一失的-在背景图像上使用线性梯度方法!
看看下面的例子:
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/
这是一个老问题，但大多数答案都需要使用预处理器或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变量以HSL而不是HEX/RGB格式定义颜色，然后使用calc()来操作它们。
这里有一个基本的例子:
:root { --link-color-h: 211; --link-color-s: 100%; --link-color-l: 50%; --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l); --link-color: hsl(var(--link-color-hsl)); --link-color-10: hsla(var(--link-color-hsl), .1); --link-color-20: hsla(var(--link-color-hsl), .2); --link-color-30: hsla(var(--link-color-hsl), .3); --link-color-40: hsla(var(--link-color-hsl), .4); --link-color-50: hsla(var(--link-color-hsl), .5); --link-color-60: hsla(var(--link-color-hsl), .6); --link-color-70: hsla(var(--link-color-hsl), .7); --link-color-80: hsla(var(--link-color-hsl), .8); --link-color-90: hsla(var(--link-color-hsl), .9); --link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l)); --link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l)); --link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l)); --link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l)); --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9)); --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9)); } .flex { display: flex; } .flex > div { flex: 1; height: calc(100vw / 10); } <h3>Color Manipulation (alpha)</h3> <div class="flex"> <div style="background-color: var(--link-color-10)"></div> <div style="background-color: var(--link-color-20)"></div> <div style="background-color: var(--link-color-30)"></div> <div style="background-color: var(--link-color-40)"></div> <div style="background-color: var(--link-color-50)"></div> <div style="background-color: var(--link-color-60)"></div> <div style="background-color: var(--link-color-70)"></div> <div style="background-color: var(--link-color-80)"></div> <div style="background-color: var(--link-color-90)"></div> <div style="background-color: var(--link-color)"></div> </div> <h3>Color Manipulation (Hue)</h3> <div class="flex"> <div style="background-color: var(--link-color-warm)"></div> <div style="background-color: var(--link-color)"></div> <div style="background-color: var(--link-color-cold)"></div> </div> <h3>Color Manipulation (Saturation)</h3> <div class="flex"> <div style="background-color: var(--link-color)"></div> <div style="background-color: var(--link-color-low)"></div> <div style="background-color: var(--link-color-lowest)"></div> </div> <h3>Color Manipulation (Lightness)</h3> <div class="flex"> <div style="background-color: var(--link-color-light)"></div> <div style="background-color: var(--link-color)"></div> <div style="background-color: var(--link-color-dark)"></div> </div>
我还创建了一个CSS框架(仍处于早期阶段)来提供基本的CSS变量支持，称为根变量。
我正在使用原始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代码。
使用filter pure CSS属性。要获得过滤器属性函数的完整描述，请阅读这篇很棒的文章。
我也有和你一样的问题，我通过使用滤镜属性的亮度功能来修复它:
.my-class {
background-color: #18d176;
filter: brightness(90%);
}
下面的代码可以让颜色变暗——只需要改变悬停的50%
.button {
display: inline-block;
background-color: green;
}
.button:hover {
background-image: linear-gradient(rgb(0 0 0/50%) 0 0);
}
