是否可以calc()在CSS中使用函数来操纵十六进制颜色值？
在下面的CSS代码段中，我想使用--enable变量background-color在MyBtnStyle属性的两个十六进制颜色值之间切换：--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)) )) */
您不能像您正在做的那样乘以十六进制值。一个技巧是使用渐变并控制颜色的百分比。这将适用于任何颜色格式：
: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) calc(100% * var(--enable)),
var(--disable-color) 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),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>这是从该答案中获得灵感的另一个想法，您可以将颜色应用于文本或任何其他属性，而不仅是背景。此技巧适用于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()颜色的代码即可
获得更多技巧的另一个相关问题：如何使用CSS根据元素的高度更改<div>元素的颜色？
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句