Question

我创建了一个具有部分透明背景的固定按钮，当在深色背景上显示时效果很好但是当我在浅色背景上显示它时，它是不可见的。

我希望它在浅色和深色背景下都是可读的，即当在浅色背景上显示时按钮应变为更暗的颜色，反之亦然。

如何在JavaScript中对此进行编码？

Answer 1

我考虑使用像TinyColor之类的东西来检测背景是亮还是暗，并适当地设置按钮的样式。

Answer 2

使用特殊的CSS属性无法解决它。最好的解决方案是使用嵌套的CSS类。类似的东西：

<强> CSS

.light-background {
   background: white;
}
.light-background button {
   background: gray;
   color: white;
}
.dark-background {
   background: gray;
}
.dark-background button {
   background: white;
   color: gray;
}

<强> HTML

<div class="light-background">
    <button>Light</button>
</div>
<div class="dark-background">
    <button>Dark</button>
</div>

https://jsfiddle.net/bwd1mvwd/

更改按钮颜色作为背景颜色更改？

2 个答案: