按百分比CSS（Javascript）动态将颜色更改为更亮或更暗-Java 学习之路

199

我们在网站上有一个很大的应用程序，我们有一些链接，比如说这个网站上的蓝色链接就是蓝色 . 现在我想做一些其他链接，但颜色较浅 . 显然我只能通过在CSS文件中添加十六进制代码来做，但我们的网站允许用户决定他们想要什么颜色的自定义配置文件/网站（如Twitter） .

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

我们假设以下代码是CSS：

a {
  color: blue;
}

a.lighter {
  color: -50%; // obviously not correct way, but just an idea
}

要么

a.lighter {
  color: blue -50%;  // again not correct, but another example of setting color and then redcuing it
}

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

21 回答

0
我找到了一个PHP类，让我可以做这个服务器端 . 我只是输出内联CSS颜色样式，无论我需要更轻/更暗 . 效果很好 .

http://www.barelyfitz.com/projects/csscolor/

（请注意，该类使用PEAR抛出错误，但我不想仅仅包含PEAR来修改颜色，所以我只删除了所有PEAR引用）

我使用静态方法将其转换为静态类，因此我可以直接调用“lighten”和“darken”函数而无需创建新对象 .

Sample usage:
```
$original_color = 'E58D8D';  
$lighter_color = Css::lighten($original_color, .7);  
$darker_color = Css::darken($original_color, .7);
```
回复于 2024-05-03T05:38:23+08:00
13

对于名为color'blue'的css，有'lightblue'

对于'绿色'，有'lightgreen'

对于'灰色'，有'lightgrey'

对于'黄色'，有'lightyellow'

尝试浏览此css命名颜色列表以获取更多信息：http://www.w3schools.com/CSS/css_colornames.asp

回复于 2024-05-03T05:38:23+08:00
0
你现在可以使用CSS过滤器来做到这一点 . 支持是跨浏览器，但随着规范继续实施和清理，这将是非常方便的 .
```
.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>
```
这里有一些关于你可以使用的各种过滤器的阅读：http://code.tutsplus.com/tutorials/say-hello-to-webkit-filters--net-23318

更新

随着过滤器进入主流市场，这似乎越来越受欢迎 . 这是当前的兼容性：http://caniuse.com/#feat=css-filters
回复于 2024-05-03T05:38:23+08:00
12
有“不透明”，这将使背景闪耀：
```
opacity: 0.5;
```
但我不确定这是你的意思 . 定义“减少颜色”：透明？还是加白色？
回复于 2024-05-03T05:38:23+08:00
79
如果你想要更暗的颜色，你可以使用低不透明度的 rgba 黑色：
```
rgba(0,0,0,0.3)
```
对于较轻的使用白色：
```
rgba(255,255,255,0.3).
```
回复于 2024-05-03T05:38:23+08:00
3

我为jquery写了一个插件，这个插件就是这个问题 . 我将颜色作为属性或他们想要的css属性的设置颜色，并通过一些计算运行它 . 十六进制到RGB，然后乘以偏移百分比，然后返回一个新值 . 如果你想要一个例子，请告诉我 .

回复于 2024-05-03T05:38:23+08:00

尝试：

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

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

回复于 2024-05-03T05:38:23+08:00

5
您可以使用一些小的javascript来使用rgb（）计算更暗和更浅的颜色 .

Fiddle：不是很好，但它只是为了说明 .

它本质上做的是设置一种颜色并选择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))      );
};
```
回复于 2024-05-03T05:38:23+08:00

将它们整合在一起，纯粹使用DIV和CSS完成的表格解决方案，尝试它;）浏览器应该支持RGBA颜色....

<head>
<style>
    .colored-div-table {
        display: table;
        table-layout: fixed;
    }
    .colored-div-table #col {
        display: table-column;
    }
    .colored-div-table #col:nth-child(odd) {
    }
    .colored-div-table #col:nth-child(even) {
    }
    .colored-div-table #col:nth-child(1){
        background-color: lightblue;
        width: 50px !important;
    }
    .colored-div-table #col:nth-child(2){
        background-color: lightyellow;
        width: 200px !important;
    }
    .colored-div-table #col:nth-child(3){
        background-color: lightcyan;
        width: 50px !important;
    }
    .colored-div-table #row {
        display: table-row;
    }
    .colored-div-table #row div {
        display: table-cell;
    }
    .colored-div-table #row div:nth-child(1) {

    }
    .colored-div-table #row div:nth-child(2) {
    }
    .colored-div-table #row div:nth-child(3) {
    }
    .colored-div-table #row:nth-child(odd) {
        background-color: rgba(0,0,0,0.1)
    }
    .colored-div-table #row:nth-child(even) {
    }
</style>
</head>
<body>

<div id="divtable" class="colored-div-table">
    <div id="col"></div>
    <div id="col"></div>
    <div id="col"></div>  

    <div id="row">
        <div>First Line</div><div>FL C2</div><div>FL C3></div>
    </div>

    <div id="row">
        <div>Second Line</div><div>SL C2</div><div>SL C3></div>
    </div>

    <div id="row">
        <div>Third Line</div><div>TL C2</div><div>TL C3></div>
    </div>

    <div id="row">
        <div>Forth Line</div><div>FL C2</div><div>FL C3></div>
    </div>
    <div id="row">
        <div>Fifth Line</div><div>FL C2</div><div>FL C3></div>
    </div>
    <div id="row">
        <div>Sixth Line</div><div>SL C2</div><div>SL C3></div>
    </div>
    <div id="row">
        <div>Seventh Line</div><div>SL C2</div><div>SL C3></div>
    </div>
    <div id="row">
        <div>Eight Line</div><div>EL C2</div><div>EL C3></div>
    </div>
    <div id="row">
        <div>Nineth Line</div><div>NL C2</div><div>NL C3></div>
    </div>
    <div id="row">
        <div>Tenth Line</div><div>TL C2</div><div>TL C3></div>
    </div>

</div>
</body>

回复于 2024-05-03T05:38:23+08:00

45
一个简单的答案是在颜色上使用50％透明的白色PNG：
```
div {
    background-color:red;
}

div:hover {
    background-image:url('lighten.png');
}
```
其中lighten.png是白色填充的PNG，透明度为50％ .
回复于 2024-05-03T05:38:23+08:00
18
如果您使用的堆栈允许您使用SASS，则可以使用lighten函数：
```
$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}
```
回复于 2024-05-03T05:38:23+08:00
1

您可以使用JXtension等JavaScript库，使用户能够使颜色更亮或更暗 . 如果您想查找这个全新图书馆的文档，click here . 您还可以使用JXtension将一种颜色与另一种颜色组合 .

回复于 2024-05-03T05:38:23+08:00
-2

请参阅我对Ctford的回复的评论 .

我认为减轻颜色的简单方法是取每个RGB组件，加上0xff并除以2.如果这不能给出你想要的确切结果，取0xff减去当前值乘以一些常数然后添加回当前值 . 例如，如果要将1/3的方向移向白色，请取（0xff - current）/ 3电流 .

你必须玩它才能看到你得到了什么结果 . 我担心，通过这个简单的公式，一个大到足以使深色褪色的因素可能会使浅色变成完全白色，而一个小到足以使浅色变亮的因素可能会使浅色不能变亮 .

尽管如此，我认为距白色的距离只有一小部分比一定数量的步骤更有希望 .

回复于 2024-05-03T05:38:23+08:00
198
不直接，没有 . 但您可以使用一个站点，例如colorschemedesigner.com，它将为您提供基色，然后为您提供不同范围的基色的十六进制和rgb代码 .

一旦我找到了我的网站的配色方案，我就把颜色的十六进制代码放在我的样式表顶部的注释部分中 .

其他一些配色方案生成器包括：
回复于 2024-05-03T05:38:23+08:00

我知道它已经晚了但你可以使用你的按钮包装并更改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>

回复于 2024-05-03T05:38:23+08:00

你可以使用RGBa（'a'是alpha透明度），但它并不广泛支持了 . 但是，它将是你现在可以使用它并添加一个后备：

a:link { 
    color: rgb(0,0,255); 
    }
a:link.lighter {
    color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */
    }
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
    color: rgba(0,0,255,0.5); /* last value is transparency */
    }

回复于 2024-05-03T05:38:23+08:00

0
在LESS中，您将使用以下变量：
```
@primary-color: #999;
@primary-color-lighter: lighten(@primary-color, 20%);
```
这将采用第一个变量并将其减轻20％（或任何其他百分比） . 在这个例子中，你最终会得到更浅的颜色： #ccc
回复于 2024-05-03T05:38:23+08:00
222
HSL颜色提供答案，HSL颜色值指定为：hsl（色调[0,255]，饱和度％，亮度％） .

IE9，Firefox，Chrome，Safari和Opera 10都支持HSL
```
a
{
color:hsl(240,65%,50%);
}
a.lighter 
{
color:hsl(240,65%,75%);
}
```
回复于 2024-05-03T05:38:23+08:00
0
据我所知，你无法在CSS中做到这一点 .

但我认为，根据您的建议，可以轻松实现一点服务器端逻辑 . CSS样式表通常是静态资产，但没有理由不能通过服务器端代码动态生成它们 . 您的服务器端脚本将：
- 检查URL参数以确定用户，从而确定用户选择的颜色 . 使用URL参数而不是会话变量，以便您仍然可以缓存CSS .
- 将颜色分解为红色，绿色和蓝色成分
- 按设定的数量增加三个组件中的每一个 . 试试这个以获得您所追求的结果 .
- 生成包含新颜色的CSS
这个CSS生成页面的链接如下所示：
```
<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">
```
如果不使用.css扩展名，请确保正确设置MIME类型，以便浏览器知道将文件解释为CSS .

（注意，为了使颜色更亮，你必须提高每个RGB值）
回复于 2024-05-03T05:38:23+08:00

如果你决定使用http://compass-style.org/，一个基于sass的css框架，它提供非常有用的 darken() 和 lighten() 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;
}

回复于 2024-05-03T05:38:23+08:00

5

看起来jPaq（http://jpaq.org/）是JXtension的替代品 . 使用jPaq的好处是，您只能下载所需内容而不是完整的JavaScript库 . 以下是Color类的下载页面的链接：http://jpaq.org/download/1.0.0.1008 .

回复于 2024-05-03T05:38:23+08:00

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

21 回答

更新

相关问题