Invertieren Sie die CSS-Schriftfarbe abhängig von der Hintergrundfarbe

Gibt es eine CSS-Eigenschaft, um die font-colorabhängig von background-colordiesem Bild zu invertieren ?

Es gibt eine CSS-Eigenschaft namens Mix-Blend-Modus , die jedoch vom IE nicht unterstützt wird. Ich empfehle die Verwendung von Pseudoelementen . Wenn Sie IE6 und IE7 unterstützen möchten, können Sie anstelle von Pseudoelementen auch zwei 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>

Ja, jetzt gibt es. Mit mix-blend-modekann dies mit CSS erfolgen.

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 ist dies auf dem neuesten Stand und wird nicht von allen Browsern unterstützt - es könnte jedoch eines Tages Standard sein. Sie müssen wahrscheinlich die Mischmodi-Funktion aktivieren, damit dies ordnungsgemäß funktioniert.

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

Ich weiß, dass dies eine alte Frage ist, aber ich wollte eine andere Lösung hinzufügen, die ich verwendet habe, bevor ich davon erfahren habe mix-blend-mode.

Die Idee ist, die Informationen in zwei Ebenen zu duplizieren, einer Rückseite und einer Vorderseite , wobei die Rückseite und die Vorderseite unterschiedliche Hintergrund- und Textfarben haben. Diese sind in Dimension und Text identisch. Dazwischen schneide ich divdie vordere (obere) Ebene mit einer Beschneidungsbox auf die gewünschte Breite zu, zeige die vordere Ebene dort, wo sie nicht beschnitten ist, und lege die hintere Schicht außerhalb des Beschneidungsfensters frei.

Dies ähnelt der "Two div" -Lösung in der akzeptierten Antwort, verwendet jedoch die zusätzliche Beschneidungsbox. Was bei dieser Lösung von Vorteil ist, ist die einfache Zentrierung von Text auf Wunsch und die einfache, direkte Auswahl der Farben.

HTML:

<div class='progress' id='back'>
  <span></span>
  <div class='progress' id='boundbox'>
    <div class='progress' id='front'>
    </div>
  </div>
</div>

CSS:

.progress {
  display: block;
  margin: 0;

  /* Choose desired padding/height in coordination with font size */
  padding: 10px;
  height: 28px;
}

#back {
  position: relative;

  /* Choose a border to your liking, or none */
  border: 1px solid lightgray;

  /* Choose your desired text attributes */
  text-align: center;
  font-family: Calibri, "Sans Serif";
  font-size: 16pt;

  /* Set the desired width of the whole progress bar */
  width: 75%;

  /* Choose the desired background and text color */
  background-color: white;
  color: black;
}

#front {
  position: absolute;
  left: 0;
  top: 0;

  /* Choose the desired background and text colors */
  background-color: navy;
  color: white;
}

#boundbox {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

Ich verwende jQuery, um den prozentualen Fortschritt programmgesteuert festzulegen und sicherzustellen, dass die Breite der Vorderseite mit der der Rückseite übereinstimmt und dass sie den gleichen Text haben. Dies kann auch leicht mit reinem Javascript durchgeführt werden.

// Set *front* width to *back* width
// Do this after DOM is ready
$('#front').width($('#back').width())

// Based upon an event that determines a content change
// you can set the text as in the below example
percent_complete = 45  // obtain this value from somewhere; 45 is just a test

$('#front').text(percent_complete.toString() + '% complete')
$('#back span').text($('#front').text())
bb_width = (percent_complete * $('#back').width())/100
$('#boundbox').css('width', bb_width.toString())

Und hier ist eine Geige: Fortschrittsbalken .

Ich habe dies in Chrome, Firefox, Microsoft Edge und IE Version 11 getestet.

Ich denke, das ist einfacher zu verstehen.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
.titulo{
    text-align: center;
    margin: 2em;
}
.padre{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10em;
    position: relative;
    width: 1000px;
    height: 500px;
}
.caja-1{
    background-color: black;
    width: 500px;
    height: 500px;
    left: 0;
    mix-blend-mode: screen;
    position:absolute;
}
.caja-3{
    width: 500px;
    height: 500px;
    display: flex;
    background-color: white;
    position: absolute;
    right: 0;
}
.texto{
    font-size: 5em;
    color: white;
    mix-blend-mode: difference;
    position:absolute;
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ESTILOS CONTRASTADOS CSS3</title>
</head>
<body>
    <h1 class="titulo">MIX-BLEND-MODE CSS EFFECT</h1>
    <div class="padre">
        <div class="caja-1"></div>
        <div class="caja-3"></div>
        <h1 class="texto">CODE STOCK CENTER</h1>
    </div>
</body>
</html>