如何用重复梯度代替线性梯度

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>

​