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

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

2019-01-26 06:00:30

其他回答

把它们结合在一起，一个纯粹用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

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

2011-05-17 08:22:23

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

opacity: 0.5;

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

2009-10-26 16:18:31

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

看看下面的例子:

学分:https://css-tricks.com/css-custom-properties-theming/

2019-01-26 06:00:30

HSL Colors提供了答案， HSL颜色值指定为:HSL (hue[0,255]，饱和度%，明度%)。

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

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

2013-08-28 14:30:17

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

推荐文章

最新文章

标签