随着背景颜色的变化改变按钮颜色？答案

【问题标题】：Change button color as background color changes?随着背景颜色的变化改变按钮颜色？
【发布时间】：2017-03-25 22:48:12
【问题描述】：

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

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

如何在 JavaScript 中编写代码？

【问题讨论】：

欢迎来到 Stack Overflow。请解释您尝试了什么，添加一些代码，显示示例并解释问题。查看此link 了解如何改进您的问题。
据我了解，您有一个在 HTML 中声明并具有 RBGA 背景属性的按钮，对吗？使用 JS 或 Sass / Less 可以通过多种方式做到这一点。在我们开始编写代码之前，您能否发布您的 HTML / CSS？

标签： javascript jquery css button

【解决方案1】：

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

【讨论】：

【解决方案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/

【讨论】：