En este artículo, aprenderemos cómo cambiar dinámicamente el color por porcentaje de CSS.
Enfoque: podemos cambiar dinámicamente el color de cualquier elemento por porcentaje usando la propiedad de filtro en CSS. La función de brillo() de la propiedad de filtro se usa para cambiar dinámicamente el color por porcentaje. La función de brillo toma un valor en porcentaje para establecer el brillo de ese color.
Sintaxis:
filter: brightness(value);
Ejemplo: En el siguiente ejemplo, establecemos el color de fondo del elemento en blanco. Pero cuando nos desplazamos sobre el párrafo, su color de fondo cambia en un 50 % porque configuramos un filtro que cambia el color de fondo del párrafo en un 50 %.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.gfg{
font-size: 40px;
color: green;
border: solid 2px red ;
background-color: white;
}
p:hover{
/* Change brightness */
filter: brightness(50%);
}
</style>
</head>
<body>
<p class="gfg">GeeksforGeeks</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA