Odwracanie koloru czcionki CSS w zależności od koloru tła

Question

Czy istnieje właściwość CSS do odwrócenia wartości font-color w zależności od tego background-color podobnego do tego zdjęcia?

Answer 1

Istnieje właściwość CSS nazywa mix-blend-mode, ale to nie jest obsługiwane przez IE. Polecam używanie pseudo elements. Jeśli lubisz wspierać IE6 i IE7, możesz również użyć two DIVs zamiast pseudo elementów.

.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

Tak, teraz nie ma. Używając mix-blend-mode, można to zrobić za pomocą 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>

Obecnie to jest krwawienie krawędzi i nie jest powszechnie obsługiwana przez wszystkie przeglądarki --it może być norma niektóre dni , chociaż. Prawdopodobnie musisz włączyć funkcję trybów mieszania, aby to działało poprawnie.

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