我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在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
}
有没有办法将颜色减少一个百分比?
当前回答
使用filter pure CSS属性。要获得过滤器属性函数的完整描述，请阅读这篇很棒的文章。
我也有和你一样的问题，我通过使用滤镜属性的亮度功能来修复它:
.my-class {
background-color: #18d176;
filter: brightness(90%);
}
其他回答
据我所知，在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;
}
使用filter pure CSS属性。要获得过滤器属性函数的完整描述，请阅读这篇很棒的文章。
我也有和你一样的问题，我通过使用滤镜属性的亮度功能来修复它:
.my-class {
background-color: #18d176;
filter: brightness(90%);
}
如果你只需要改变背景颜色，这是一个很好的方法，是万无一失的-在背景图像上使用线性梯度方法!
看看下面的例子:
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/
如果您需要为了旧的浏览器兼容性而强制使用它，您可以使用Colllor自动选择类似的颜色变化。
示例(颜色:#a9dbb4):
