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

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


当前回答

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

其他回答

您可以使用一点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))      );
};

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

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

示例(颜色:#a9dbb4):

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

opacity: 0.5;

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

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