css - 如何使用 calc() 在颜色值之间切换?
问题描述
calc()
是否可以在 CSS 中使用函数来操作十六进制颜色值?
在下面的 CSS 片段中,我想使用变量在MyBtnStyle--enable
的两个十六进制颜色值之间切换:和。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)) )) */
解决方案
你不能像你正在做的那样乘以十六进制值。一个技巧是使用渐变并控制颜色的百分比。这适用于任何颜色格式:
: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>
这是另一个灵感来自这个答案的想法,您可以将颜色应用于文本或任何其他属性,而不仅仅是背景。这个技巧适用于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()
颜色的问题中的代码
另一个获得更多技巧的相关问题:如何根据 <div> 元素的高度或宽度更改其颜色?
推荐阅读
- java - @TransactionalEventListener 和 @Async 抛出 LazyInitializationException
- python - 我的 Python 程序警告我 lib crypto 是以不安全的方式加载的
- vb.net - VB.Net 异步 UI 线程问题
- ansible - 如何扁平化嵌套的字典?
- django - 如何获取在 django 中引用的值?
- spring - 为什么我的 TransactionManager 认为我的 SessionFactory 没有设置
- cookies - 如何使用 HTTPOnly/ Secure 属性保护 ColdFusion cookie?
- node.js - 为什么 VS Code 不尊重 TypeScript 路径?
- azure - Azure windows server 2019 安装docker
- python - 如何将python类转换为表postgres