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

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


当前回答

Try:

a {
  color: hsl(240, 100%, 50%);
}

a:hover {
  color: hsl(240, 100%, 70%);
}

其他回答

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

还有一种暗色调,效果相同,但方向相反。

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

我知道已经很晚了,但是,你可以使用一个包装器来改变你的按钮和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>

我正在使用原始CSS3和SVG添加一个答案,不需要LESS或SASS。

基本上,如果问题是为了全局悬停效果而将颜色调亮10%、25%、50%或更暗,你可以像这样创建一个SVG数据调用

:root{
--lighten-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssLighten" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="white" width="50" height="50"/></svg>') !important;
--darken-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssDarken" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="black" width="50" height="50"/></svg>') !important;

}

.myButton{
    color: white;
    background-color:blue;
}
.myButton:hover{
    background-image: var(--lighten-bg);
}

出于某种原因,我不知道,SVG不允许我在“填充”属性中输入十六进制值,但“白色”和“黑色”满足了我的需求。

发人深思: 如果你不介意使用图片,可以使用50%透明的PNG作为背景图片。如果您想要更花哨,可以调用一个PHP脚本作为背景图像,并将HEX和不透明度值传递给它,然后让它输出上面的SVG代码。

存在“不透明度” 这将使背景闪闪发光:

opacity: 0.5;

但我不确定你是这个意思。定义“减色”:透明?或者加白色?