Inverti colore CSS in base al colore di sfondo

Question

Esiste una proprietà CSS per invertire lo font-color a seconda dello background-color come questa immagine?

Answer 1

C'è una proprietà CSS chiamata mix-blend-mode, ma non è supportato da IE. Raccomando di usare pseudo elements. Se ti piace supportare IE6 e IE7 puoi anche usare two DIVs invece di pseudo elementi.

.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

Sì, ora c'è. Usando mix-blend-mode, questo può essere fatto con CSS.

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>

Al momento, questo è il sanguinamento bordo e non è ampiamente supportato da tutti i browser --è potrebbe essere standard un giorno , anche se. Probabilmente dovrai abilitare la funzione di modalità di fusione affinché funzioni correttamente.

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