Code
2023-08-25 10:00:00

动态改变颜色，以较轻或较深的百分比CSS

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

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

当前回答

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

2018-03-17 20:53:48

其他回答

在写这篇文章的时候，这里是我发现的最好的纯CSS颜色操作实现:

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

这里有一个基本的例子:

: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>

我还创建了一个CSS框架(仍处于早期阶段)来提供基本的CSS变量支持，称为根变量。

2019-03-20 17:53:33

把它们结合在一起，一个纯粹用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>
2016-12-30 10:31:09

如果您需要为了旧的浏览器兼容性而强制使用它，您可以使用Colllor自动选择类似的颜色变化。

示例(颜色:#a9dbb4):

2019-05-02 20:30:42

据我所知，在CSS中没有办法做到这一点。

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

检查URL参数以确定用户，从而确定用户选择的颜色。使用URL参数而不是会话变量，这样您仍然可以缓存CSS。 把颜色分成红、绿、蓝三部分 三个组成部分分别增加一个固定的数量。用这个方法进行实验，得到你想要的结果。 生成包含新颜色的CSS

到这个css生成页面的链接看起来像这样:

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

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

(注意，要使颜色变浅，你必须提高每个RGB值)

2009-10-26 16:27:36

您可以使用一点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))      );
};
2013-08-20 10:41:10

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1