所以我想做的就是根据其高度更改div元素的颜色。
例如：如果div的高度<= 20％，我希望它是绿色，如果它的20％以上，它应该是蓝色。
我想仅使用CSS来实现（如果可能的话）
我想为文本颜色创建一个变量，但取决于我设置的背景颜色。
:root {
--main-color-hue: 205;
--main-color-saturation: 73%;
--main-color-luminosity: 29%;
--main-color: hsla(var(--main-color-hue), var(--main-color-saturation), var(--main-color-luminosity), 1);
--main-dark-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 0.5), 1);
--main-light-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 1.5), 1);
--main-text-color: red; /* calculate white or black */
--main-dark-text-color: red; /* calculate white or black */
--main-light-text-color: red; /* calculate white or black */
}
button {
background-color: var(--main-color);
color: var(--main-text-color);
border: 0;
padding: 16px;
}
button.dark {
background-color: var(--main-dark-color);
color: var(--main-dark-text-color);
border: 0;
padding: 16px;
}
button.light {
background-color: var(--main-light-color);
color: …