背景色が変わるとボタンの色が変わりますか？

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/