Hàm repeating-linear-gradient() là một hàm dựng sẵn trong CSS. Nó được dùng để lặp lại các linear gradient.
Cú pháp:
background-image: repeating-linear-gradient( angle | to side-or-corner, color-stop1,
color-stop2, ...);
Tham số: Hàm này chấp nhận nhiều tham số được liệt kê dưới đây:
- angle: Tham số này dùng để giữ góc chỉ hướng cho gradient. Giá trị của nó nằm giữa 0 đến 360 độ. Giá trị mặc định là 180 độ.
- side-or-corner: Tham số này dùng để định nghĩa vị trí điểm bắt đầu của đường gradient. Nó bao gồm hai từ khóa: từ đầu chỉ phía ngang trái hoặc phải. Từ thứ hai chỉ phía dọc trên hoặc dưới. Thứ tự không quan trọng, mỗi từ khóa có thể bỏ qua.
- color-stop1, color-stop2, ...: Tham số này dùng để giữ giá trị màu theo sau là vị trí dừng tùy chọn.
Ví dụ dưới đây minh họa hàm repeating-linear-gradient() trong CSS.
Ví dụ 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>
Đầu ra:
Ví dụ 2:
<!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>
Đầu ra:
Trình duyệt được hỗ trợ:
- Google Chrome 26
- Edge 12
- Firefox 16
- Microsoft Edge 12
- Opera 12.1
- Safari 7