CSS-Schriftfarbe je nach Hintergrundfarbe invertieren

Question

Gibt es eine CSS-Eigenschaft zum Invertieren der font-color abhängig von der background-color wie dieses Bild?

Answer 1

Es gibt eine CSS-Eigenschaft namens mix-blend-mode, aber es ist nicht von IE unterstützt. Ich empfehle die Verwendung pseudo elements. Wenn Sie IE6 und IE7 unterstützen möchten, können Sie anstelle von Pseudoelementen auch two DIVs verwenden.

.inverted-bar { 
 
    position: relative; 
 
} 
 

 
.inverted-bar:before, 
 
.inverted-bar:after { 
 
    padding: 10px 0; 
 
    text-indent: 10px; 
 
    position: absolute; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    content: attr(data-content); 
 
} 
 

 
.inverted-bar:before { 
 
    background-color: aqua; 
 
    color: red; 
 
    width: 100%; 
 
} 
 

 
.inverted-bar:after { 
 
    background-color: red; 
 
    color: aqua; 
 
    width: 20%; 
 
}

<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>

Answer 2

Ja, jetzt ist da. Mit mix-blend-mode kann dies mit CSS getan werden.

http://jsfiddle.net/1uubdtz6/

div { 
 
    position:absolute; 
 
    height:200px 
 
} 
 

 
/* A white bottom layer */ 
 
#whitebg { 
 
    background: white; 
 
    width:400px; 
 
    z-index:1 
 
} 
 

 
/* A black layer on top of the white bottom layer */ 
 
#blackbg { 
 
    background: black; 
 
    width:100px; 
 
    z-index:2 
 
} 
 

 
/* Some white text on top with blend-mode set to 'difference' */ 
 
span { 
 
    position:absolute; 
 
    font-family: Arial, Helvetica; 
 
    font-size: 100px; 
 
    mix-blend-mode: difference; 
 
    color: white; 
 
    z-index: 3 
 
} 
 

 
/* A red DIV over the scene with the blend-mode set to 'screen' */ 
 
#makered { 
 
    background-color: red; 
 
    mix-blend-mode: screen; 
 
    width:400px; 
 
    z-index:4 
 
}

<div id="whitebg"></div> 
 
<div id="blackbg"></div> 
 
<div id="makered"></div> 
 

 
<span>test</span>

Im Moment diese Kante blutet und ist nicht weit von allen Browsern unterstützt --es vielleicht eines Tages Standard sein obwohl. Sie müssen wahrscheinlich die Funktion "Blend-Modi" aktivieren, damit dies ordnungsgemäß funktioniert.

http://html.adobe.com/webplatform/enable/