Fatal编程技术网
  • css/
  • 按百分比CSS（Javascript）将颜色动态更改为较亮或较暗

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

css

按百分比CSS（Javascript）将颜色动态更改为较亮或较暗,css,Css,我们在网站上有一个大的应用程序，我们有一些链接，比如说蓝色，就像这个网站上的蓝色链接一样。现在我想做一些其他的链接，但颜色较浅。显然，我只需在CSS文件中添加十六进制代码即可，但我们的网站允许用户决定他们定制的个人资料/网站（如Twitter）的颜色 所以，我的问题是：我们能按百分比减少颜色吗 假设以下代码是CSS： a { color: blue; } a.lighter { color: -50%; // obviously not correct way, but just an

我们在网站上有一个大的应用程序，我们有一些链接，比如说蓝色，就像这个网站上的蓝色链接一样。现在我想做一些其他的链接，但颜色较浅。显然，我只需在CSS文件中添加十六进制代码即可，但我们的网站允许用户决定他们定制的个人资料/网站（如Twitter）的颜色

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

假设以下代码是CSS：

a {
  color: blue;
}

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

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

有“不透明度” 这将使背景光透过：

opacity: 0.5;
但我不确定这就是你的意思。定义“减少颜色”：使透明？还是添加白色？

据我所知，在CSS中无法做到这一点

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

  • 检查URL参数以确定用户，从而确定用户选择的颜色。使用URL参数而不是会话变量，这样您仍然可以缓存CSS
  • 将颜色分解为红色、绿色和蓝色
  • 以设定的数量增加三个组件中的每一个。用这个做实验，得到你想要的结果
  • 生成包含新颜色的CSS
    • 指向此CSS生成页面的链接如下所示：

    <link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">
    如果不使用.css扩展名，请确保正确设置MIME类型，以便浏览器知道如何将文件解释为css

    （请注意，要使颜色更亮，您必须提高每个RGB值）

    不是直接的，不是。但是您可以使用一个站点，例如，它将为您提供基础颜色，然后为您提供不同基础颜色范围的十六进制和RGB代码

    一旦我找到了我网站的配色方案，我就把这些颜色的十六进制代码放在样式表顶部的一个评论部分中，并将它们命名

    其他一些颜色方案生成器包括：

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

        我认为使颜色变亮的简单方法是取每个RGB分量，加上0xff并除以2。如果这不能给出您想要的确切结果，则取0xff减去当前值乘以某个常数，然后加回当前值。例如，如果要将1/3的方向移向白色，则取（0xff-电流）/3+电流

        你必须玩它，看看你得到了什么结果。我会担心，在这个简单的公式中，一个大到足以使深色很好地褪色的因子可能会使浅色完全变白，而一个小到足以使浅色稍微变亮的因子可能会使深色不够亮

        尽管如此，我仍然认为，与固定的步数相比，将一小部分距离变为白色更有希望。

        您可以使用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 */
    }
        如果您使用的堆栈允许您使用，则可以使用以下函数：

        $linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}
        如果您决定使用基于sass的css框架，它将提供非常有用的
        darken（）
        和
        lighte（）
        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;
}
        我发现了一个PHP类，它允许我在服务器端执行此操作。我只需要输出一个内联CSS颜色样式，以满足我需要的任何颜色的亮/暗。效果很好

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

        我把它变成了一个带有静态方法的静态类，这样我就可以直接调用“light”和“darken”函数，而无需创建新对象

        示例用法：

        $original_color = 'E58D8D';  
$lighter_color = Css::lighten($original_color, .7);  
$darker_color = Css::darken($original_color, .7);
        如果您想要较深的颜色，可以使用低不透明度的
        rgba
        黑色：

        rgba(0, 0, 0, 0.3);
        对于打火机，请使用白色：

        rgba(255, 255, 255, 0.3);
        一个过时的简单答案（2013年）是在颜色上使用50%透明的白色PNG：

        div{
背景色：红色；
}
div:悬停{
背景图片：url（'lighte.png'）；
}
        其中lighte.png是透明度为50%的白色填充的png

        今天有更好的方法来做到这一点。我希望人们现在停止评论。

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

        for（变量i=-10；i<$（'.row:eq（0.block'）。长度/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颜色提供了答案， HSL颜色值指定为：HSL（色调[0255]，饱和度%，亮度%）

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

        a
{
color:hsl(240,65%,50%);
}
a.lighter 
{
color:hsl(240,65%,75%);
}
        在LESS中，您将使用以下变量：

        @primary-color: #999;
@primary-color-lighter: lighten(@primary-color, 20%);
        这将采取第一个变量，并减轻20%（或任何其他百分比）。在本例中，您的浅色是：
        #ccc

        试试：

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

a:hover {
  color: hsl(240, 100%, 70%);
}
        在所有现代浏览器中都可以这样做（请参阅）

        。按钮{
颜色：#ff0000；
}
/*注：100%为基线，因此85%略暗，
20%的颜色会明显变暗*/
.按钮：悬停{
滤光片：亮度（85%）；
}
        Foo-lorem-ipsum
        将所有功能结合在一起，一个纯粹使用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>

        
.彩色div表{
显示：表格；
表布局：固定；
}
.彩色div表

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

        

        :root{
--lighten-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssLighten" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="white" width="50" height="50"/></svg>') !important;
--darken-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssDarken" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="black" width="50" height="50"/></svg>') !important;

        

        .myButton{
    color: white;
    background-color:blue;
}
.myButton:hover{
    background-image: var(--lighten-bg);
}