Invertir el color de fuente CSS según el color de fondo
¿Existe una propiedad CSS para invertir font-colorsegún una background-colorimagen como esta?
Hay una propiedad CSS llamada mix-blend-mode , pero IE no la admite. Recomiendo usar pseudoelementos . Si desea admitir IE6 e IE7, también puede utilizar dos DIV en lugar de pseudoelementos.
.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>
Usar 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>
Sé que esta es una vieja pregunta, pero quería agregar otra solución que he estado usando antes de enterarme mix-blend-mode.
La idea es tener la información duplicada en dos capas, un reverso y un frente , donde el reverso y el frente tienen diferentes colores de fondo y texto. Estos son idénticos en dimensión y texto. En el medio, uso un cuadro de recorte divpara recortar la capa frontal (superior) al ancho deseado, mostrando la capa frontal donde no está recortada y revelando la capa posterior fuera de la ventana de recorte.
Esto es similar a la solución "Dos div" en la respuesta aceptada, pero utiliza el cuadro de recorte adicional. La ventaja de esta solución es el fácil centrado del texto si se desea y la selección sencilla y directa de los colores.
// 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()).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;
}html
<div class='progress' id='back'>
<span></span>
<div class='progress' id='boundbox'>
<div class='progress' id='front'>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>Utilizo jQuery para establecer mediante programación el porcentaje de progreso y asegurarme de que el ancho del frente coincida con el del reverso y que tengan texto idéntico. Esto también se puede hacer fácilmente con Javascript puro.
Y aquí hay un violín: barra de progreso .
Probé esto en Chrome, Firefox, Microsoft Edge e IE versión 11.
He visto que esta es una pregunta bastante antigua, pero al encontrarme con el mismo problema, se me ocurrió una solución que usa solo CSS pero requiere usar el mismo texto 3 veces en 3 divs separados.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: fit-content;
padding: 1rem;
font-size: 4rem;
overflow: hidden;
border: 1px solid black;
position: relative;
color: white; /* Hide the first text */
}
.container .bellow, .container .above {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container .bellow span, .container .above span {
position: relative;
top: 1rem; /* Same as padding */
left: 1rem; /* Same as padding */
}
.container .bellow {
color: black; /* The text as seen normally */
}
.container .above {
color: white; /* Text color when background slides in*/
overflow: hidden;
white-space: nowrap;
background-color: red;
width: 0; /* width: 50%; --> See the effect*/
transition: width 5s;
}
.container:hover .above {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
Input text (hover)
<div class="bellow">
<span>Input text (hover)</span>
</div>
<div class="above">
<span>Input text (hover)</span>
</div>
</div>
</body>
</html>