我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在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
}
有没有办法将颜色减少一个百分比?
当前回答
下面的代码可以让颜色变暗——只需要改变悬停的50%
.button {
display: inline-block;
background-color: green;
}
.button:hover {
background-image: linear-gradient(rgb(0 0 0/50%) 0 0);
}
其他回答
不直接，不。但是你可以使用一个网站，比如colorschemedesigner.com，它会给你基本颜色，然后给你不同范围的基本颜色的十六进制和rgb代码。
一旦我找到了我的网站配色方案，我就把颜色的十六进制代码放在样式表顶部的评论部分中并命名它们。
其他一些配色方案生成器包括:
http://www.colorschemer.com/online.html http://colorschemegenerator.com/ http://www.cssjuice.com/25-popular-color-scheme-and-palette-generators/
存在“不透明度” 这将使背景闪闪发光:
opacity: 0.5;
但我不确定你是这个意思。定义“减色”:透明?或者加白色?
我知道已经很晚了，但是，你可以使用一个包装器来改变你的按钮和rgba颜色函数的不透明度级别，正如在其他答案中所说，但没有明确的例子。
这是一支笔:
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>
一个过时的简单答案(在2013年)是在颜色上使用50%透明的白色PNG:
div {
background-color:red;
}
div:hover {
background-image:url('lighten.png');
}
其中light . PNG是一个白色填充的PNG，透明度为50%。
现在有更好的方法。我希望人们现在停止评论。
如果你决定使用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;
}
