Función CSS repeating-linear-gradient()
Funciones CSSEjemplos
Gradiente lineal repetido:
Pruébalo »
Definición y uso
La función repeating-linear-gradient() se utiliza para crear imágenes de fondo con gradiente lineal repetido.
La función repeating-linear-gradient() funciona de manera similar a linear-gradient(), pero la imagen se repite después de alcanzar el punto final especificado.
Uso básico:
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
Esto crea un gradiente lineal que se repite en un ángulo de 45 grados. Comienza con rojo, amarillo en el 10%, verde en el 20%, y luego se repite.
Fondo de rayas:
background: repeating-linear-gradient(90deg, blue, blue 10px, white 10px, white 20px);
Esto crea un fondo de rayas horizontales, cada raya azul y blanca tiene un ancho de 10 píxeles.
Fondo de rayas diagonales
background: repeating-linear-gradient(135deg, black, black 15px, transparent 15px, transparent 30px);
Esto crea un fondo de rayas diagonales en negro y transparente que se repite en un ángulo de 135 grados, cada una con un ancho de 15 píxeles.
Crear un fondo de cebra
background: repeating-linear-gradient(90deg, #fff, #fff 10px, #000 10px, #000 20px);
Fondo de rayas arcoíris
background: repeating-linear-gradient(45deg, red, orange 20px, yellow 40px, green 60px, blue 80px, indigo 100px, violet 120px);
Soporte del navegador
Los números en la tabla indican la primera versión del navegador que soporta la función.
Los números especificados por "webkit", "moz" u "o" indican la primera versión con prefijo que soporta la función.
| Función | |||||
|---|---|---|---|---|---|
| repeating-linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
Sintaxis CSS
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
| Value | Descripción |
|---|---|
| angle | Define la dirección del ángulo del gradiente. De 0deg a 360deg, el valor predeterminado es 180deg. |
| side-or-corner | Especifica la posición inicial del gradiente lineal. Se compone de dos palabras clave: la primera especifica la posición horizontal (left o right), la segunda especifica la posición vertical (top o bottom). El orden es arbitrario y cada palabra clave es opcional. |
| color-stop1, color-stop2,... | Especifica los puntos de parada de color en el gradiente. Se pueden especificar el color y la posición, como "color 50%", lo que indica que el color está en la posición 50% del gradiente. |
Más ejemplos
Ejemplos
Diferentes gradientes lineales repetidos:
Pruébalo »
Tutorial de CSS:Gradientes CSS3
Otras extensiones