it-swarm.com.de

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

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

enter image description here

59

Es gibt eine CSS-Eigenschaft namens mix-blend-mode , die jedoch vom IE nicht unterstützt wird. Ich empfehle Pseudoelemente . Wenn Sie IE6 und IE7 unterstützen möchten, können Sie auch zwei DIVs anstelle von Pseudoelementen verwenden.

enter image description here

.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>
68
tomatentobi

Ja, jetzt gibt es. Mit mix-blend-mode, das kann mit CSS gemacht werden.

blend-modes example

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>

Momentan ist dies der letzte Schrei und wird nicht von allen Browsern allgemein unterstützt - es könnte jedoch eines Tages Standard sein. Sie müssen wahrscheinlich die Mischmodus-Funktion aktivieren, damit dies ordnungsgemäß funktioniert.

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

49
fanfare

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

Die Idee ist, die Informationen in zwei Ebenen, einem Hintergrund und einem Vordergrund, duplizieren zu lassen, wobei der Hintergrund und der Vordergrund unterschiedliche Hintergrund- und Textfarben haben. Diese sind in Abmessung und Text identisch. Dazwischen benutze ich ein Beschneidungsfeld div, um die oberste Ebene auf die gewünschte Breite zuzuschneiden, wobei die oberste Ebene angezeigt wird, auf der sie nicht beschnitten ist, und um die Hintergrundebene außerhalb des Beschneidungsfensters anzuzeigen.

Dies ähnelt der "Two Div" -Lösung in der akzeptierten Antwort, verwendet jedoch das zusätzliche Auswahlfeld. Es ermöglicht auf Wunsch eine einfache Zentrierung des Texts und eine einfache, direkte Auswahl der Farben.

HTML:

<div class='progress' id='background'>
  <span></span>
  <div class='progress' id='boundbox'>
    <div class='progress' id='foreground'>
    </div>
  </div>
</div>

CSS (Ich entschuldige mich für die verwirrenden ID-Namen "Hintergrund" und "Vordergrund"):

.progress {
  display: block;
  margin: 0;

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

#background {
  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;
}

#foreground {
  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 des Vordergrunds mit der des Hintergrunds übereinstimmt und dass sie den gleichen Text haben. Dies ist auch mit reinem Javascript problemlos möglich.

// Set foreground width to background width
// Do this after DOM is ready
$('#foreground').width($('#background').width())

// Based upon an event that determines a content change
// you can set the text as in the below example
percent_complete = 45   /* Compute a % complete value */
$('#foreground').text(`${percent_complete}% complete`)
$('#background span').text($('#foreground').text())
$('#boundbox').css('width', `${percent_complete}%`)

Und hier ist eine Geige: Fortschrittsbalken .

enter image description here

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

2
lurker