repeating-linear-gradient()

Try it

background: repeating-linear-gradient(
  #e66465,
  #e66465 20px,
  #9198e5 20px,
  #9198e5 25px
);

background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);

background:
  repeating-linear-gradient(transparent, #4d9f0c 40px),
  repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

Độ dài của đoạn độ dốc lặp lại là khoảng cách giữa điểm dừng màu đầu tiên và cuối cùng. Nếu màu đầu tiên không có độ dài điểm dừng, độ dài điểm dừng mặc định là 0. Với mỗi lần lặp, vị trí của các điểm dừng màu được dịch chuyển theo bội số của độ dài độ dốc tuyến tính cơ bản. Do đó, vị trí của mỗi điểm dừng màu cuối cùng trùng khớp với điểm dừng màu bắt đầu; nếu các giá trị màu khác nhau, sẽ tạo ra sự chuyển đổi trực quan sắc nét. Điều này có thể được khắc phục bằng cách lặp lại màu đầu tiên như màu cuối cùng.

Như với bất kỳ độ dốc màu nào, độ dốc tuyến tính lặp lại không có kích thước cố hữu; tức là nó không có kích thước tự nhiên hay ưu tiên, cũng không có tỉ lệ ưu tiên. Kích thước cụ thể của nó sẽ khớp với kích thước của phần tử mà nó áp dụng.

Vì các <gradient> thuộc kiểu dữ liệu <image>, chúng chỉ có thể được sử dụng ở nơi có thể sử dụng <image>. Vì lý do này, repeating-linear-gradient() sẽ không hoạt động trên background-color và các thuộc tính khác sử dụng kiểu dữ liệu <color>.

Cú pháp

/* Độ dốc lặp lại nghiêng 45 độ,
   bắt đầu màu xanh và kết thúc màu đỏ, lặp lại 3 lần */
repeating-linear-gradient(45deg, blue, red 33.3%)

/* Độ dốc lặp lại từ góc dưới bên phải đến góc trên bên trái,
   bắt đầu màu xanh và kết thúc màu đỏ, lặp lại mỗi 20px */
repeating-linear-gradient(to left top, blue, red 20px)

/* Độ dốc từ dưới lên trên,
   bắt đầu màu xanh, chuyển sang màu xanh lá sau 40%,
   và kết thúc màu đỏ. Độ dốc này không lặp lại vì
   điểm dừng màu cuối cùng mặc định là 100% */
repeating-linear-gradient(0deg, blue, green 40%, red)

/* Độ dốc lặp lại năm lần, từ trái sang phải,
   bắt đầu màu đỏ, chuyển sang màu xanh lá, và trở lại màu đỏ */
repeating-linear-gradient(to right, red 0%, green 10%, red 20%)

/* Nội suy trong không gian màu hình chữ nhật */
repeating-linear-gradient(in oklab, blue, red 50px)

/* Nội suy trong không gian màu cực */
repeating-linear-gradient(in hsl, blue, red 50px)

/* Nội suy trong không gian màu cực
  với phương pháp nội suy sắc độ dài hơn */
repeating-linear-gradient(in hsl longer hue, blue, red 50px)

Giá trị

<side-or-corner>

Vị trí điểm bắt đầu của đường độ dốc. Nếu được chỉ định, nó bao gồm từ to và tối đa hai từ khóa: một từ chỉ cạnh ngang (left hoặc right), và cạnh kia chỉ cạnh dọc (top hoặc bottom). Thứ tự của các từ khóa cạnh không quan trọng. Nếu không được chỉ định, mặc định là to bottom.

Các giá trị to top, to bottom, to left, và to right tương đương với các góc 0deg, 180deg, 270deg, và 90deg. Các giá trị khác được chuyển đổi thành góc.

<angle>

Góc hướng của đường độ dốc. Giá trị 0deg tương đương với to top; các giá trị tăng dần xoay theo chiều kim đồng hồ.

<linear-color-stop>

Giá trị <color> của điểm dừng màu, theo sau là một hoặc hai vị trí dừng tùy chọn (mỗi cái là <percentage> hoặc <length> dọc theo trục độ dốc). Phần trăm 0% hoặc độ dài 0 đại diện cho điểm bắt đầu của độ dốc; giá trị 100% là 100% kích thước hình ảnh, nghĩa là độ dốc sẽ không lặp lại.

<color-hint>

Gợi ý màu là một gợi ý nội suy xác định cách độ dốc tiến triển giữa các điểm dừng màu liền kề. Độ dài xác định điểm giữa hai điểm dừng màu mà màu độ dốc nên đạt đến điểm giữa của quá trình chuyển đổi màu. Nếu bỏ qua, điểm giữa của quá trình chuyển đổi màu là điểm giữa giữa hai điểm dừng màu.

Cú pháp chính thức

<repeating-linear-gradient()> = 
  repeating-linear-gradient( [ <linear-gradient-syntax> ] )  

<linear-gradient-syntax> = 
  [ [ <angle> | <zero> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list>  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<linear-color-stop> = 
  <color> <color-stop-length>?  

<linear-color-hint> = 
  <length-percentage>  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<color-stop-length> = 
  <length-percentage>{1,2}  

<length-percentage> = 
  <length>      |
  <percentage>  

Ví dụ

Sọc ngựa vằn

body {
  width: 100vw;
  height: 100vh;
}

body {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    black 20px,
    black 40px
  );
  /* with multiple color stop lengths */
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    black 20px 40px
  );
}

Mười thanh ngang lặp lại

body {
  width: 100vw;
  height: 100vh;
}

body {
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(26 198 204),
    rgb(26 198 204) 7%,
    rgb(100 100 100) 10%
  );
}

Vì điểm dừng màu cuối cùng là 10% và độ dốc là theo chiều dọc, mỗi độ dốc trong độ dốc lặp lại chiếm 10% chiều cao, vừa đủ 10 thanh ngang.

Nội suy trong không gian màu hình chữ nhật

body {
  width: 100vw;
  height: 100vh;
}

body {
  background: repeating-linear-gradient(90deg in oklab, blue, red 100px);
}

Nội suy với sắc độ

<div class="shorter">shorter hue</div>
<div class="longer">longer hue</div>

div {
  height: 50vh;
  color: #333300;
  font-weight: bolder;
  padding-left: 1.5rem;
}

Trong ví dụ nội suy này, hệ màu hsl được sử dụng và sắc độ được nội suy.

.shorter {
  background: repeating-linear-gradient(
    90deg in hsl shorter hue,
    red,
    blue 300px
  );
}

.longer {
  background: repeating-linear-gradient(
    90deg in hsl longer hue,
    red,
    blue 300px
  );
}

Hộp ở trên sử dụng nội suy ngắn hơn, nghĩa là màu đi từ đỏ sang xanh dương theo cung ngắn hơn trên bánh xe màu. Hộp ở dưới sử dụng nội suy dài hơn, nghĩa là màu đi từ đỏ sang xanh dương theo cung dài hơn, đi qua màu xanh lá, vàng và cam.

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• Sử dụng độ dốc màu CSS
• Các hàm độ dốc khác: linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• image()
• element()
• image-set()
• cross-fade()