En CSS , podemos usar la propiedad background-color para establecer el color de fondo de un elemento en un color específico. A veces queremos agregar más estilo al elemento al establecer el color de fondo mediante la propiedad de gradiente lineal . La propiedad de gradiente lineal de CSS le permite mostrar transiciones suaves entre dos o más colores.
Sintaxis:
background-image: linear-gradient(direction, color1, color2, ...);
Parámetros:
- dirección: especifique la dirección de la transición. El valor predeterminado es 180 grados (si no se especifica).
- color1: especifica el primer color.
- color2: especifica el segundo color.
Nota: Puede especificar tantos colores como desee.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Remove the default padding and
margin of all HTML tags */
* {
margin: 0;
padding: 0;
}
/* Implementation of linear-gradient property */
#lin_grad {
/* Set the height of the div to
the entire screen */
height: 100vh;
/* linear-gradient syntax */
background-image: linear-gradient(lightblue, darkblue);
}
</style>
</head>
<body>
<div id="lin_grad"></div>
</body>
</html>
Producción:
Ejemplo 2: Esto demuestra el establecimiento de la dirección. En el código HTML anterior, simplemente cambie el valor de la propiedad «imagen de fondo» en la parte CSS de la sección principal como se indica a continuación.
Sintaxis:
background-image: linear-gradient(to right, lightblue, darkblue)
Producción:
Ejemplo 3: Esto demuestra el ajuste de la dirección en grados. En el primer código HTML anterior, simplemente cambie el valor de la propiedad «imagen de fondo» en la parte CSS de la sección principal como se indica a continuación.
Sintaxis:
background-image: linear-gradient(135deg, white, lightgreen, darkblue);
Producción:
Ejemplo 4: Esto demuestra la configuración de la posición para cada color . Si no especifica la ubicación de un color, se coloca a mitad de camino entre su color anterior y el color que le sigue. Los dos gradientes dados a continuación son equivalentes. En el primer código HTML anterior, simplemente cambie la «imagen de fondo» en la parte CSS de la sección principal como se indica a continuación.
Sintaxis:
background-image: linear-gradient(90deg, white, lightgreen, darkblue)
background-image: linear-gradient(90deg, white 0%,
lightgreen 50%, darkblue 100%)
Producción:
Cambiemos el valor porcentual del color verde claro y veamos qué sucede.
Sintaxis:
background-image: linear-gradient(90deg, white 0%,
lightgreen 80%, darkblue 100%)
Producción:
Publicación traducida automáticamente
Artículo escrito por varunvj181 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA