如何使用 calc() 在颜色值之间切换？答案

【问题标题】：How to Use calc() to switch between color values?如何使用 calc() 在颜色值之间切换？
【发布时间】：2018-12-06 09:28:58
【问题描述】：

是否可以在 CSS 中使用calc() 函数来操作十六进制颜色值？

在下面的 CSS sn-p 中，我想使用 --enable 变量在 MyBtnStyle 的 background-color 属性的两个十六进制颜色值之间切换：--enable-color 和 --disable-color。

使用rgb(r,g,b) 颜色格式可以实现这一点，其中每个颜色分量都是使用calc() 计算的，但我更喜欢直接在十六进制颜色值之间切换。

    :root {
        --enable: 0;
        --disable-color: #ff0000;
        --disable-r: 255;
        --disable-g: 0;
        --disable-b: 0;
        --enable-color: #00ff00;
        --enable-r: 0;
        --enable-g: 255;
        --enable-b: 0;
    }

    .MyBtnStyle {
        width: 100%;
        height: 100%;
        text-align: center;
        border: 2px;
        margin: 1px 1px;
        color: black;
        padding: 1px 1px;
        background-color: calc(var(--enable-color)*var(--enable) + var(--disable-color)*(1 - var(--enable))); 
    }

/* this works */
    /* rgb( calc(var(--enable-r)*var(--enable) + var(--disable-r)*(1 - var(--enable)) ), 
            calc(var(--enable-g)*var(--enable) + var(--disable-g)*(1 - var(--enable)) ), 
            calc(var(--enable-b)*var(--enable) + var(--disable-b)*(1 - var(--enable)) )) */

【问题讨论】：

标签： css css-variables css-calc

【解决方案1】：

你不能像你正在做的那样乘以十六进制值。一个技巧是使用渐变并控制颜色的百分比。这适用于任何颜色格式：

:root {
  --enable: 0;
  --disable-color: red;
  --enable-color: #00ff00;
}

.MyBtnStyle {
  text-align: center;
  margin: 5px;
  color: black;
  padding:20px;
  background:
   linear-gradient(
     var(--enable-color)    calc(100% * var(--enable)),
     var(--disable-color) 0 calc(100% * (1 - var(--enable))) 
   );
     
 }

<div class="MyBtnStyle" style="--enable:1">some text</div>

<div class="MyBtnStyle">some text</div>

这是调整background-size的另一种语法：

:root {
  --enable: 0;
  --disable-color: red;
  --enable-color: #00ff00;
}

.MyBtnStyle {
  text-align: center;
  margin: 5px;
  color: black;
  padding:20px;
  background:
   linear-gradient(var(--enable-color) 0 0),
   var(--disable-color);
  background-size:100% calc(100% * var(--enable))
}

<div class="MyBtnStyle" style="--enable:1">some text</div>

<div class="MyBtnStyle">some text</div>

这是另一个想法inspired from this answer，您可以在其中将颜色应用于文本或任何其他属性，而不仅仅是背景。这个技巧适用于hsl() 着色。

:root {
  --enable: 0;
  --disable-color: red;
  --enable-color: #00ff00;
}

.MyBtnStyle {
  text-align: center;
  margin: 5px;
  color: hsl(0,100%, calc((1 - var(--enable))*100%));
  border:3px solid hsl(120,100%, calc((1 - var(--enable))*50%));
  padding:20px;
  background:
   linear-gradient(var(--enable-color),var(--enable-color)),
   var(--disable-color);
  background-size:100% calc(100% * var(--enable))
}

<div class="MyBtnStyle" style="--enable:1">some text</div>

<div class="MyBtnStyle">some text</div>

这对于完全控制对比度很有用。我们同时更改背景颜色和文本颜色。黑色和白色（或相同颜色的两个版本）之间很容易，因为我们只需要控制亮度。

要表达两种颜色的任意组合，只需依赖我们定义rgb()颜色的问题中的代码

另一个获取更多技巧的相关问题：How to change the color of <div> Element depending on its height or width?

【讨论】：