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

我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在CSS文件中添加十六进制代码来做，但我们的网站让用户决定他们想要的自定义配置文件/网站(如Twitter)的颜色。

所以，我的问题是:我们能减少百分比的颜色吗?

让我们说下面的代码是CSS:

a {
  color: blue;
}

a.lighter {
  color: -50%; // obviously not correct way, but just an idea
}

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

其他回答

如果你决定使用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;
}

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

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

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

到这个css生成页面的链接看起来像这样:

<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">

如果您不使用. CSS扩展名，请确保正确设置mime类型，以便浏览器知道将文件解释为CSS。

(注意，要使颜色变浅，你必须提高每个RGB值)

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

一个过时的简单答案(在2013年)是在颜色上使用50%透明的白色PNG:

div {
    background-color:red;
}

div:hover {
    background-image:url('lighten.png');
}

其中light . PNG是一个白色填充的PNG，透明度为50%。

现在有更好的方法。我希望人们现在停止评论。

不直接，不。但是你可以使用一个网站，比如colorschemedesigner.com，它会给你基本颜色，然后给你不同范围的基本颜色的十六进制和rgb代码。

一旦我找到了我的网站配色方案，我就把颜色的十六进制代码放在样式表顶部的评论部分中并命名它们。

其他一些配色方案生成器包括:

http://www.colorschemer.com/online.html http://colorschemegenerator.com/ http://www.cssjuice.com/25-popular-color-scheme-and-palette-generators/

推荐文章