La tarea es establecer el color de primer plano en función del color de fondo para que se vuelva visible. Aquí se discuten algunas de las técnicas importantes. Vamos a utilizar JavaScript.
Acercarse:
- Primero seleccione el color de fondo aleatorio (seleccionando valores RGB aleatorios) o uno específico.
- Utilice la fórmula YIQ para obtener el valor YIQ.
- Dependiendo del valor de YIQ, seleccione el color de primer plano efectivo.
Ejemplo 1: Este ejemplo utiliza el enfoque discutido anteriormente.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change text color depending
on background color using JavaScript?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style>
#backG {
width: 200px;
height: 50px;
color: white;
background: green;
margin: 0 auto;
}
</style>
</head>
<body id="body" align="center">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"
style="font-size: 15px;
font-weight: bold;">
</p>
<button onclick="GFG_Fun()">
click here
</button>
<br>
<br>
<div id="backG">This is GeeksForGeeks.</div>
<script>
var el_up = document.getElementById('GFG_UP');
var rgbValue = [255, 0, 0];
el_up.innerHTML =
"Click on the button to select effective pattern.";
function setColor() {
rgbValue[0] = Math.round(Math.random() * 255);
rgbValue[1] = Math.round(Math.random() * 255);
rgbValue[2] = Math.round(Math.random() * 255);
var color = Math.round(((parseInt(rgbValue[0]) * 299) +
(parseInt(rgbValue[1]) * 587) +
(parseInt(rgbValue[2]) * 114)) / 1000);
var textColor = (color > 125) ? 'black' : 'white';
var backColor =
'rgb(' + rgbValue[0] + ', ' + rgbValue[1] + ', '
+ rgbValue[2] + ')';
$('#backG').css('color', textColor);
$('#backG').css('background-color', backColor);
}
function GFG_Fun() {
setColor();
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo usa el enfoque discutido anteriormente pero no usa solo el color blanco y negro para el primer plano.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change text color depending
on background color using JavaScript?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style>
#backG {
width: 200px;
height: 50px;
color: white;
background: green;
margin: 0 auto;
}
</style>
</head>
<body id="body" align="center">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"
style="font-size: 15px; font-weight: bold;">
</p>
<button onclick="GFG_Fun()">
click here
</button>
<br>
<br>
<div id="backG">This is GeeksForGeeks.</div>
<script>
var el_up = document.getElementById('GFG_UP');
var rgbValue = [255, 0, 0];
el_up.innerHTML =
"Click on the button to select effective pattern.";
function getforeGColor(rgb) {
var cols = rgb.match(/^rgb\((\d+), \s*(\d+), \s*(\d+)\)$/);
var b = 1;
var rValue = cols[1];
var gValue = cols[2];
var bValue = cols[3];
var rV = Math.floor((255 - rValue) * b);
var gV = Math.floor((255 - gValue) * b);
var bV = Math.floor((255 - bValue) * b);
return 'rgb(' + rV + ', ' + gV + ', ' + bV + ')';
}
function setColor() {
rgbValue[0] = Math.round(Math.random() * 255);
rgbValue[1] = Math.round(Math.random() * 255);
rgbValue[2] = Math.round(Math.random() * 255);
var color = Math.round(((parseInt(rgbValue[0]) * 299) +
(parseInt(rgbValue[1]) * 587) +
(parseInt(rgbValue[2]) * 114)) / 1000);
var backColor =
'rgb(' + rgbValue[0] + ', ' + rgbValue[1] + ', '
+ rgbValue[2] + ')';
var textColor = getforeGColor(backColor);
$('#backG').css('color', textColor);
$('#backG').css('background-color', backColor);
}
function GFG_Fun() {
setColor();
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA