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

我创建了一个具有部分透明背景的固定按钮，它在黑色背景中显示时效果很好，但是当我将其显示在浅色背景上时，它不可见。更改按钮颜色作为背景颜色更改？

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

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

来源

2016-11-11 Alireza Ghadak

欢迎堆栈溢出。请解释您尝试的内容，添加一些代码，展示示例并解释问题。查看此[链接]（http://stackoverflow.com/help/mcve）了解如何改进您的问题。 –

从我的理解你有一个在HTML中声明并具有RBGA背景属性的按钮，是否正确？有些方法可以用JS或Sass/Less来完成。在我们开始编写代码之前，您可以发布您的HTML/CSS吗？ – Falk

我会考虑使用诸如TinyColor之类的东西来检测背景是否明亮或黑暗并适当地设置按钮的样式。

来源

2016-11-11 16:47:12 skav

有没有办法解决它使用特殊的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/

来源

2016-11-11 16:52:01 aggiustino

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

回答

相关问题