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

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


当前回答

Try:

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

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

其他回答

如果你决定使用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;
}

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

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

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

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

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

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

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

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

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

自2020年1月以来,所有现代浏览器都支持100%的过滤器。甚至UC浏览器的Android(而不是Chrome,在80美元的手机上)也支持它。

a {
    /* a nice, modern blue for links */
    color: #118bee;
}
a:active {
    /* Darken on click by 15% (down to 85%) */
    filter: brightness(0.85);
}

此外,你可以用CSS变量动态控制这一点,自2017年10月以来,大多数浏览器(不包括QQ)都支持CSS变量:

:root {
    --color: #118bee;
    --hover-brightness: 1.2;
}
a {
    color: var(--color);
}
a:active {
    /* Darken on click */
    filter: brightness(var(--hover-brightness));
}

不是我的项目,但有一个很好的例子,可以看到现代CSS是多么伟大,看看:MVP.css


原来的答案

如果你使用的堆栈允许你使用Sass或Less,你可以使用点亮函数:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

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

还有一种暗色调,效果相同,但方向相反。