Inherit Bootstrap Schaltfläche Textfarbe aus der Umgebung div mit Farbverlauf

Question

Ich entwerfe eine Webseite mit MVC, ASP.NET und Twitter Bootstrap. Ich möchte eine Schaltfläche erstellen, die ihre Textschriftfarbe von der Hintergrundfarbe des umgebenden Divs erbt. Wenn ich die Tasten CSS-Stil wie color: transparent einstellen, ist der Text nicht lesbar, weil er die gleiche Farbe wie die Taste hat.

Gibt es eine Möglichkeit, dies in CSS zu tun, oder muss ich JS oder jQuery verwenden, um dies zu erreichen? Hier

ein Beispiel:

.red { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    background: -webkit-linear-gradient(left, red 33%, #FFFFFF 66%); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(left, red 33%, #FFFFFF 66%); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(left, red 33%, #FFFFFF 66%); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(left, red 33%, #FFFFFF 66%); /* Standard syntax (must be last) */ 
 
} 
 

 
.custom { 
 
    position: absolute; 
 
    border: 1px solid black; 
 
    top: 70px; 
 
    left: 70px; 
 
    background-color: orange; 
 
}

<div class="red"> 
 
<button class="btn custom" type="input"> 
 
Button 
 
</button> 
 
</div>

Answer 1

verwenden jQuery-Code:

var divColor = $(".red").css("backgroundColor"); 

$(".custom").css("color", divColor);