Inverser la couleur de la police CSS en fonction de la couleur d'arrière-plan

Question

Existe-t-il une propriété CSS permettant d'inverser le font-color en fonction de la background-color comme cette photo ?

Answer 1

Il existe une propriété CSS appelée mode mixte mais il n'est pas pris en charge par IE. Je recommande d'utiliser pseudo-éléments . Si vous voulez supporter IE6 et IE7, vous pouvez aussi utiliser deux DIVs au lieu de pseudo-éléments.

.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

Utilice mix-blend-mode .

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>

Answer 3

Je sais qu'il s'agit d'une vieille question, mais je voulais ajouter une autre solution que j'utilisais avant d'apprendre l'existence des mix-blend-mode .

L'idée est de faire en sorte que les informations soient dupliquées en deux couches, un arrière et un avant où le arrière y avant ont des couleurs de fond et de texte différentes. Ceux-ci ont une dimension et un texte identiques. Entre les deux, j'utilise une boîte d'écrêtage div pour recadrer le avant (en haut) à la largeur souhaitée, en montrant la couche avant où elle n'est pas coupée, et en révélant la couche arrière en dehors de la fenêtre d'écrêtage.

Cette solution est similaire à la solution "Two div" de la réponse acceptée, mais elle utilise la boîte d'écrêtage supplémentaire. L'avantage de cette solution est qu'elle permet de centrer facilement le texte, si vous le souhaitez, et de sélectionner les couleurs de manière simple et directe.

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;
}

J'utilise jQuery pour définir de manière programmatique le pourcentage de progression et m'assurer que la largeur de l'écran de l'utilisateur est suffisante. avant correspond à celle de l arrière et qu'ils ont le même texte. Cela peut aussi être fait facilement avec du Javascript pur.

// 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())

Et voici un violon : Barre de progression .

Je l'ai testé dans Chrome, Firefox, Microsoft Edge et IE version 11.

Answer 4

Je pense que c'est plus simple à comprendre.

*{
    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>