css - 如何使用重复渐变代替线性渐变

Question

我在这里有这个线性梯度代码。https://jsfiddle.net/0qfy3ks2/

我将如何让它使用重复渐变？

所以图像是一样的，只是使用了重复的渐变。

background-image: repeating-linear-gradient

重复渐变不使用 background-size，因为它会破坏重复模式。

.test {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(
      45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px
    ),
    linear-gradient(
      -45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px
    );
  background-size: 10px 10px;
}

<div class="test"></div>

Answer 1

你可以做这样的事情吗？您可以通过更改 px 值来更改大小：

.test {
  width: 100px;
  height: 100px;
  background-size: 8px 8px;
  background:
    repeating-linear-gradient(45deg,
      transparent,
      transparent 4.5px,
      rgba(0, 0, 0, .75) 5px,
      transparent 5.5px,
      transparent 7px),
    repeating-linear-gradient(-45deg,
      transparent,
      transparent 4.5px,
       rgba(0, 0, 0, .75) 5px,
      transparent 5.5px,
      transparent 7px);
}

<div class="test"></div>