萧寂

css实现背景色的斑马条效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>斑马条效果</title>
<style>
  .zebra-stripes {
    width: 100%; /* 或者你想要设置的具体宽度 */
    height: 200px; /* 或者你想要设置的具体高度 */
    background-image: repeating-linear-gradient(
      to left,  /* 也可以是to top或者to bottom等 */
      red,
      red 20px,
      blue 20px, // 这个值需要和上面的值相等
      blue 40px  // 这个值必须为前面值的两倍
    );
  }
</style>
</head>
<body>

<div class="zebra-stripes"></div>

</body>
</html>

repeating-linear-gradient 是 CSS 中的一个函数，用于创建一个线性渐变的背景图像，这个图像会在指定的方向上无限重复。这个函数的参数定义了渐变的起始方向、颜色以及颜色变化的位置。

to left：这是渐变的方向。to left 表示渐变从右向左进行。你也可以使用 to right、to top、to bottom 或者角度值（如 45deg）来指定渐变的方向。
red：这是渐变的起始颜色。渐变将从这个颜色开始。
red 20px：这指定了起始颜色（红色）将延伸到20像素的位置。
blue 20px：这指定了在20像素的位置，颜色将变为蓝色。由于前一个颜色也是在20像素的位置结束，这实际上意味着在20像素的位置，颜色会立即从红色变为蓝色。
blue 40px：这指定了蓝色将延伸到40像素的位置。由于前一个颜色在20像素的位置开始，这意味着蓝色将占据20像素的宽度。

这个 repeating-linear-gradient 函数创建了一个从右向左的渐变，其中红色和蓝色各占20像素的宽度，每40像素重复一次。这个渐变会无限重复，形成一种条纹效果。如果你想要条纹的宽度不同，可以调整颜色后面跟着的像素值。如果你想要条纹的颜色顺序不同，可以调整颜色的顺序。

css实现背景色的斑马条效果 ​

css实现背景色的斑马条效果