按百分比动态将颜色更改为更亮或更暗 CSS (Javascript)

Question

提问by Basit

We have a big application on the site and we have a few links which are, let's say blue color like the blue links on this site. Now I want to make some other links, but with lighter color. Obviously I can just do simply by the hex code adding in the CSS file, but our site lets user decide what colors they want for their customized profile/site (like Twitter).

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

So, my question is: can we reduce the color by percentage?

所以，我的问题是：我们可以按百分比减少颜色吗？

Let's say the following code is CSS:

假设以下代码是 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
}

Is there a way to reduce a color by a percentage?

有没有办法按百分比减少颜色？

Answer 1

采纳答案by Grant Crofton

If you're using a stack which lets you use SASS, you can use the lightenfunction:

如果您使用的堆栈允许您使用SASS，则可以使用该lighten函数：

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

Answer 2

回答by imjared

You can do this with CSS filtersin all modern browsers (see the caniuse compatibility table).

您可以在所有现代浏览器中使用CSS 过滤器执行此操作（请参阅caniuse 兼容性表）。

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

<button class="button">Foo lorem ipsum</button>

Here's more reading from CSS Tricks about the various filters you can use: https://css-tricks.com/almanac/properties/f/filter/

这里有更多关于你可以使用的各种过滤器的 CSS Tricks 阅读：https: //css-tricks.com/almanac/properties/f/filter/

Answer 3

回答by Pekka

There is "opacity" which will make the background shine through:

有“不透明度”将使背景闪耀：

opacity: 0.5;

but I'm not sure this is what you mean. Define "reduce color": Make transparent? Or add white?

但我不确定这就是你的意思。定义“减少颜色”：使透明？还是加白？

Answer 4

回答by Spliff

HSL Colors provide an answer, a HSL color value is specified with: hsl(hue [0,255], saturation %, lightness %).

HSL 颜色提供了一个答案，HSL 颜色值指定为：hsl(hue [0,255]，饱和度 %，亮度 %)。

HSL is supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+

IE9+、Firefox、Chrome、Safari 和 Opera 10+ 支持 HSL

a
{
color:hsl(240,65%,50%);
}
a.lighter 
{
color:hsl(240,65%,75%);
}

Answer 5

回答by sparanoid

At the time of writing, here's the best pure CSS implementation for color manipulation I found:

在撰写本文时，这是我发现的最好的纯 CSS 颜色操作实现：

Use CSS variables to define your colors in HSL instead of HEX/RGB format, then use calc()to manipulate them.

使用 CSS 变量以 HSL 而不是 HEX/RGB 格式定义您的颜色，然后使用calc()它们来操作它们。

Here's a basic example:

这是一个基本示例：

:root {
  --link-color-h: 211;
  --link-color-s: 100%;
  --link-color-l: 50%;
  --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);

  --link-color: hsl(var(--link-color-hsl));
  --link-color-10: hsla(var(--link-color-hsl), .1);
  --link-color-20: hsla(var(--link-color-hsl), .2);
  --link-color-30: hsla(var(--link-color-hsl), .3);
  --link-color-40: hsla(var(--link-color-hsl), .4);
  --link-color-50: hsla(var(--link-color-hsl), .5);
  --link-color-60: hsla(var(--link-color-hsl), .6);
  --link-color-70: hsla(var(--link-color-hsl), .7);
  --link-color-80: hsla(var(--link-color-hsl), .8);
  --link-color-90: hsla(var(--link-color-hsl), .9);

  --link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
  --link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));

  --link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
  --link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));

  --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
  --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}

.flex {
  display: flex;
}

.flex > div {
  flex: 1;
  height: calc(100vw / 10);
}

<h3>Color Manipulation (alpha)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-10)"></div>
  <div style="background-color: var(--link-color-20)"></div>
  <div style="background-color: var(--link-color-30)"></div>
  <div style="background-color: var(--link-color-40)"></div>
  <div style="background-color: var(--link-color-50)"></div>
  <div style="background-color: var(--link-color-60)"></div>
  <div style="background-color: var(--link-color-70)"></div>
  <div style="background-color: var(--link-color-80)"></div>
  <div style="background-color: var(--link-color-90)"></div>
  <div style="background-color: var(--link-color)"></div>
</div>

<h3>Color Manipulation (Hue)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-warm)"></div>
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-cold)"></div>
</div>

<h3>Color Manipulation (Saturation)</h3>

<div class="flex">
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-low)"></div>
  <div style="background-color: var(--link-color-lowest)"></div>
</div>

<h3>Color Manipulation (Lightness)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-light)"></div>
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-dark)"></div>
</div>

I also created a CSS framework (still in early stage) to provide basic CSS variables support called root-variables.

我还创建了一个 CSS 框架（仍处于早期阶段）来提供称为root-variables 的基本 CSS 变量支持。

Answer 6

回答by trebor1979

In LESS, you would use the following variables:

在 LESS 中，您将使用以下变量：

@primary-color: #999;
@primary-color-lighter: lighten(@primary-color, 20%);

This would take the 1st variable and lighten it by 20% (or any other percentage). In this example, you'd end up with your lighter color being: #ccc

这将采用第一个变量并将其减轻 20%（或任何其他百分比）。在此示例中，您最终会得到较浅的颜色：#ccc

Answer 7

回答by NemanjaLazic

If you want darker color, you can use rgbablack with low opacity:

如果你想要更深的颜色，你可以使用rgba低不透明度的黑色：

rgba(0,0,0,0.3)

For lighter use white:

对于较轻的使用白色：

rgba(255,255,255,0.3).

Answer 8

回答by ctford

As far as I know, there's no way you can do this in CSS.

据我所知，你无法在 CSS 中做到这一点。

But I think that a little server-side logic could easily do as you suggest. CSS stylesheets are normally static assets, but there is no reason they couldn't be dynamically generated by server-side code. Your server-side script would:

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

Check a URL parameter to determine the user and therefore the user's chosen colour. Use a URL parameter rather than a session variable so that you can still cache the CSS.
Break up the colour into its red, green and blue components
Increment each of the three components by a set amount. Experiment with this to get the results you are after.
Generate CSS incorporating the new colour

检查 URL 参数以确定用户，从而确定用户选择的颜色。使用 URL 参数而不是会话变量，以便您仍然可以缓存 CSS。
将颜色分解为红色、绿色和蓝色分量
将三个组件中的每一个增加一个设定的数量。对此进行试验以获得您想要的结果。
生成包含新颜色的 CSS

Links to this CSS-generating page would look something like:

指向此 CSS 生成页面的链接如下所示：

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

If you don't use the .css extension be sure to set the MIME-type correctly so that the browser knows to interpret the file as CSS.

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

(Note that to make colours lighter you have to raiseeach of the RGB values)

（请注意，要使颜色更亮，您必须提高每个 RGB 值）

Answer 9

回答by Joao Tavora

if you decide to use http://compass-style.org/, a sass-based css framework, it provides very useful darken()and lighten()sass functions to dynamically generate css. it's very clean:

如果你决定使用http://compass-style.org/，基于SASS-CSS框架，它提供了非常有用的darken()和lighten()青菜功能动态生成CSS。它非常干净：

@import compass/utilities

$link_color: #bb8f8f
a
  color: $link_color
a:visited
  color: $link_color
a:hover
  color: darken($link_color,10)

generates

产生

a {
  color: #bb8f8f;
}

a:visited {
  color: #bb8f8f;
}

a:hover {
  color: #a86f6f;
}

Answer 10

回答by Alvaro Montoro

This is an old question, but most of the answers require the use of a preprocessor or JavaScript to operate, or they not only affect the color of the element but also the color of the elements contained within it. I am going to add a kind-of-complicated CSS-only way of doing the same thing. Probably in the future, with the more advanced CSS functions, it will be easier to do.

这是一个老问题，但大部分答案都需要使用预处理器或JavaScript来操作，否则不仅会影响元素的颜色，还会影响其中包含的元素的颜色。我将添加一种复杂的 CSS-only 方式来做同样的事情。可能以后，有了更高级的CSS功能，做起来会更容易。

The idea is based on using:

这个想法基于使用：

RGB colors, so you have separate values for red, green, and blue;
CSS variables, to store the color values and the darkness; and
The calcfunction, to apply the change.

RGB 颜色，因此您有单独的红色、绿色和蓝色值；
CSS 变量，用于存储颜色值和暗度；和
的calc功能，以应用更改。

By default darkness will be 1 (for 100%, the regular color), and if you multiply by a number between 0 and 1, you'll be making the color darker. For example, if you multiply by 0.85 each of the values, you'll be making the colors 15% darker (100% - 15% = 85% = 0.85).

默认情况下，暗度为 1（对于 100%，常规颜色），如果乘以 0 到 1 之间的数字，则会使颜色变暗。例如，如果您将每个值乘以 0.85，您将使颜色变深 15% (100% - 15% = 85% = 0.85)。

Here is an example, I created three classes: .dark, .darker, and .darkestthat will make the original color 25%, 50%, and 75% darker respectively:

下面是一个示例，我创建了三个类：.dark、.darker和.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>

按百分比动态将颜色更改为更亮或更暗 CSS (Javascript)

提问by Basit

采纳答案by Grant Crofton

回答by imjared

回答by Pekka

回答by Spliff

回答by sparanoid

回答by trebor1979

回答by NemanjaLazic

回答by ctford

回答by Joao Tavora

回答by Alvaro Montoro

相关推荐

最近更新

标签

按百分比动态将颜色更改为更亮或更暗 CSS (Javascript)

提问by Basit

采纳答案by Grant Crofton

回答by imjared

回答by Pekka

回答by Spliff

回答by sparanoid

回答by trebor1979

回答by NemanjaLazic

回答by ctford

回答by Joao Tavora

回答by Alvaro Montoro

相关推荐

input[type="button"], input[type="submit"], button CSS 行为不正常

CSS css选择器匹配没有属性x的元素

CSS 使用 Google Fonts 时，Bootstrap 图标（Glyphicons）的位置稍微向上，我该如何解决这个问题？

我可以在 CSS 类名中使用驼峰命名法吗

相关推荐

最近更新

标签