我们在网站上有一个很大的应用程序,我们有一些链接,比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接,但是用浅一点的颜色。显然,我可以简单地通过在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
}

有没有办法将颜色减少一个百分比?


当前回答

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

示例(颜色:#a9dbb4):

其他回答

我找到了一个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);

下面的代码可以让颜色变暗——只需要改变悬停的50%

.button {
  display: inline-block;
  background-color: green;
}

.button:hover {
  background-image: linear-gradient(rgb(0 0 0/50%) 0 0);
}

如果你决定使用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值)

这是一个老问题,但大多数答案都需要使用预处理器或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>