动态改变颜色，以较轻或较深的百分比CSS

有“不透明” 这将使背景发光通过:

opacity: 0.5;

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

据我所知，在CSS中没有办法做到这一点。

但我认为一点服务器端逻辑就可以很容易地实现您的建议。CSS样式表通常是静态资产，但没有理由不能由服务器端代码动态生成。您的服务器端脚本将:

1. 检查URL参数以确定用户，从而确定用户选择的颜色。使用URL参数而不是会话变量，这样您仍然可以缓存CSS。
2. 把颜色分成红、绿、蓝三部分
3. 三个组成部分分别增加一个固定的数量。用这个方法进行实验，得到你想要的结果。
4. 生成包含新颜色的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 */
}

所有现代浏览器都100%支持filter。甚至Android版UC浏览器(而不是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)都支持这些变量:

:root {
--color: #118bee;
--hover-brightness: 1.2;
}
a {
color: var(--color);
}
a:active {
/* Darken on click */
filter: brightness(var(--hover-brightness));
}

不是我的项目，但它是一个很好的例子，可以看到现代CSS是多么伟大，看看:MVP.css

原来的答案

如果你使用的堆栈允许你使用萨斯或少，你可以使用lighten函数:

$linkcolour: #0000FF;


a {
color: $linkcolour;
}


a.lighter {
color: lighten($linkcolour, 50%);
}

还有darken，它做同样的事情，但方向相反。

如果你决定使用http://compass-style.org/，一个基于sass的css框架，它提供了非常有用的darken()和lighten() 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

试一试:

a {
color: hsl(240, 100%, 50%);
}


a:hover {
color: hsl(240, 100%, 70%);
}

在所有现代浏览器中都可以使用CSS过滤器(参见Caniuse兼容性表)。

.button {
color: #ff0000;
}


/* note: 100% is baseline so 85% is slightly darker,
20% would be significantly darker */
.button:hover {
filter: brightness(85%);
}

<button class="button">Foo lorem ipsum</button>

Here's more reading from CSS Tricks about the various filters you can use: 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颜色函数的不透明度级别，正如在其他答案中所说，但没有明确的例子。

这是一支笔:

< a href = " https://codepen。io/aronkof/pen/WzGmjR" rel="nofollow noreferrer">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>

如果你只需要改变background的颜色，这是一个很好的方法，是不受未来影响的-在background图像上使用linear-gradient方法!

看看下面的例子:

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， .darker和.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变量支持，称为root-variables。

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

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

示例(颜色:#a9dbb4):

使用filter纯CSS属性。有关filter属性函数的完整描述，请阅读这篇很棒的文章。

我有一个和你一样的问题，我通过使用filter属性的brightness函数来修复它:

.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);
}