La función repeating-linear-gradient() es una función incorporada en CSS que se utiliza para repetir degradados lineales.
Sintaxis:
background-image: repeating-linear-gradient( angle | to side-or-corner, color-stop1, color-stop2, ...);
Parámetros: esta función acepta muchos parámetros que se enumeran a continuación:
- ángulo: este parámetro se utiliza para mantener el ángulo de dirección del degradado. Su valor se encuentra entre 0 y 360 grados. Por defecto su valor es 180 grados.
- side-or-corner: este parámetro se utiliza para definir la posición del punto de inicio de la línea de degradado. Consta de dos palabras clave: la primera indica el lado horizontal, izquierdo o derecho, y la segunda el lado vertical, arriba o abajo. El orden no es relevante y cada una de las palabras clave es opcional.
- color-stop1, color-stop2, …: este parámetro se utiliza para mantener el valor del color seguido de su posición de parada opcional.
El siguiente ejemplo ilustra la función repeating-linear-gradient() en CSS:
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>repeating-linear-gradient() Function</title>
<style>
#main {
height: 200px;
background-color: white;
background-image: repeating-linear-gradient(#090,
#fff 10%, #2a4f32 20%);
}
.gfg {
text-align:center;
font-size:40px;
font-weight:bold;
padding-top:80px;
}
.geeks {
font-size:17px;
text-align:center;
}
</style>
</head>
<body>
<div id="main">
<div class = "gfg">GeeksforGeeks</div>
<div class = "geeks">A computer science portal for geeks</div>
</div>
</body>
</html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>repeating-linear-gradient() Function</title>
<style>
#main {
height: 200px;
background-color: white;
background-image: repeating-linear-gradient(45deg,
blue, green 7%, white 10%);
}
.gfg {
text-align:center;
font-size:40px;
font-weight:bold;
padding-top:80px;
}
.geeks {
font-size:17px;
text-align:center;
}
</style>
</head>
<body>
<div id="main">
<div class = "gfg">GeeksforGeeks</div>
<div class = "geeks">A computer science portal for geeks</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Google cromo 26
- Borde 12
- Firefox 16
- explorador de Internet 10
- Ópera 12.1
- Safari 7