我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在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
}
有没有办法将颜色减少一个百分比?
当前回答
如果你决定使用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;
}
其他回答
自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%);
}
还有一种暗色调，效果相同，但方向相反。
把它们结合在一起，一个纯粹用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>
你可以在所有现代浏览器中使用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/
Try:
a {
color: hsl(240, 100%, 50%);
}
a:hover {
color: hsl(240, 100%, 70%);
}
下面的代码可以让颜色变暗——只需要改变悬停的50%
.button {
display: inline-block;
background-color: green;
}
.button:hover {
background-image: linear-gradient(rgb(0 0 0/50%) 0 0);
}
