Ändern Sie die Farbe der Schaltfläche, wenn sich die Hintergrundfarbe ändert?

Question

Ich habe eine feste Schaltfläche mit einem teilweise transparenten Hintergrund erstellt, die gut funktioniert, wenn sie über einem dunklen Hintergrund angezeigt wird, aber wenn ich sie über einem hellen Hintergrund zeige, ist sie nicht sichtbar.

Ich möchte, dass es sowohl auf hellen als auch auf dunklen Hintergründen lesbar ist, d. H. Die Schaltfläche sollte auf einer hellen Hintergrundfarbe zu einer dunkleren Farbe wechseln und umgekehrt.

Wie kann ich das in JavaScript codieren?

Answer 1

Ich würde in Betracht ziehen, mit etwas wie TinyColor zu erkennen, ob der Hintergrund hell oder dunkel ist und die Schaltfläche entsprechend stylen.

Answer 2

Es gibt keine Möglichkeit, es mithilfe spezieller CSS-Eigenschaft zu lösen. Die beste Lösung besteht darin, mit verschachtelten CSS-Klassen zu spielen. Etwas wie:

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/