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

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


当前回答

如果你只需要改变背景颜色,这是一个很好的方法,是万无一失的-在背景图像上使用线性梯度方法!

看看下面的例子:

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/

其他回答

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

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

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

如果你想要更暗的颜色,你可以使用低不透明度的rgba黑色:

rgba(0, 0, 0, 0.3);

打火机用白色:

rgba(255, 255, 255, 0.3);

您可以使用一点javascript来计算使用rgb()的较深和较浅的颜色。

提琴:不是很好,但这只是为了说明。

它本质上所做的是设置一个颜色,并选择20个rgb相同数量的颜色(相互比较),仅相隔10个。

for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
 var r = 91;
 var g = 192;
 var b = 222;
 $('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+   (i*10))      );
};