所以在下面的代码中，我有一个--pop颜色和一个--bg背景色。我想从这两个计算悬停颜色如下：混合--pop与逆--bg。例如，如果背景是黑色，我希望将--pop与白色混合。--bg可以是任何颜色。
--pop
--bg
--pop: #123456;--bg: black;--hover: color-mix(in srgb, var(--pop) 30%, ???inverse of --bg here???)
--pop: #123456;
--bg: black;
--hover: color-mix(in srgb, var(--pop) 30%, ???inverse of --bg here???)
7y4bm7vi1#
如果JavaScript的解决方案是好的，你可以尝试这样的东西：
const inverseColor = (color) => { color = color.substring(1); color = parseInt(color, 16); color = 0xFFFFFF ^ color; color = color.toString(16); // convert to hex return `#${(`000000` + color).slice(-6)}`; // pad with leading zeros};let color = getComputedStyle(document.documentElement) .getPropertyValue('--bg');let inverseBG = inverseColor(color); document.documentElement.style .setProperty('--bg-inverse', inverseBG);
const inverseColor = (color) => {
color = color.substring(1);
color = parseInt(color, 16);
color = 0xFFFFFF ^ color;
color = color.toString(16); // convert to hex
return `#${(`000000` + color).slice(-6)}`; // pad with leading zeros
};
let color = getComputedStyle(document.documentElement)
.getPropertyValue('--bg');
let inverseBG = inverseColor(color);
document.documentElement.style
.setProperty('--bg-inverse', inverseBG);
然后
--hover: color-mix(in srgb, var(--pop) 30%, var(--bg-inverse));
wmtdaxz32#
这是一个未来使用relative color syntax的仅限CSS的解决方案
--pop: #123456;--bg: black;--hover: color-mix(in srgb, var(--pop) 30%, rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b)))
--hover: color-mix(in srgb, var(--pop) 30%, rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b)))
它现在还没有支持，但很快你就可以在Chrome上测试它了
2条答案
按热度按时间7y4bm7vi1#
如果JavaScript的解决方案是好的，你可以尝试这样的东西：
然后
wmtdaxz32#
这是一个未来使用relative color syntax的仅限CSS的解决方案
它现在还没有支持，但很快你就可以在Chrome上测试它了