Invertir el color de fuente CSS según el color de fondo

No dudes en compartir nuestra página y códigos en tus redes sociales, ayúdanos a ampliar nuestra comunidad.

Solución:

Hay una propiedad CSS llamada mix-blend-mode, pero IE no la admite. Recomiendo usar pseudo elementos. Si desea admitir IE6 e IE7, también puede usar dos DIV en lugar de pseudo elementos.

.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%;

Utilizar 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

test

Sé que esta es una vieja pregunta, pero quería agregar otra solución que he estado usando antes de enterarme de mix-blend-mode.

La idea es tener la información duplicada en dos capas, una espalda y un parte delanteradonde el espalda y parte delantera tienen diferentes colores de fondo y texto. Estos son idénticos en dimensión y texto. En el medio, uso un cuadro de recorte div para recortar el parte delantera capa (superior) al ancho deseado, mostrando la parte delantera capa donde no está recortada, y revelando el espalda capa fuera de la ventana de recorte.

Esto es similar a la solución “Dos div” en la respuesta aceptada, pero usa el cuadro de recorte adicional. Lo que es ventajoso en esta solución es el centrado fácil del texto si se desea, y la selección simple y directa de los colores.

HTML:

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;

Uso jQuery para establecer mediante programación el porcentaje de progreso y asegurarme de que el ancho de la parte delantera coincide con el de la espalda, y que tienen el mismo texto. Esto también se puede hacer fácilmente con Javascript puro.

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

Y aquí hay un violín: barra de progreso.

Probé esto en Chrome, Firefox, Microsoft Edge e IE versión 11.

Valoraciones y comentarios

Si estás contento con lo expuesto, tienes la opción de dejar una reseña acerca de qué te ha gustado de este ensayo.

---

---

Utiliza Nuestro Buscador