具有重复线性渐变的交叉影线效果导致图案不均匀

Question

我试图在 CSS 中创建一个对角线交叉影线图案作为背景。我从CSS-Tricks 中条纹背景的示例开始。

.crosshatch {
	width: 500px;
	height: 200px;
  color: white;
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.5) 1px,
	transparent 1px,
	transparent 5px
  );
}

<div class="crosshatch"></div>

但是，我看到（仅在 Chrome 和 Opera 中）在 1px 处重复八次后，在接下来的六次迭代中，线条变为 2px 宽，然后返回到正确的 1px 宽度。

我在 Edge 和 Firefox 中没有遇到这个问题。

Chrome 和 Opera 有解决方法吗？

Answer 1

我似乎找不到完美的解决方案。这个来自Stack Overflow 问题的JSFiddle -“CSS 中的对角条纹宽度为 1px”似乎与此CSS-Tricks 教程底部附近提到的并发症一致

.crosshatch {
   width: 500px;
   height: 200px;
   color: white;
   background-image: linear-gradient(
      45deg, 
      rgba(0,0,0,0.5) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(0,0,0,0.5) 50%, 
      rgba(0,0,0,0.5) 75%, 
      transparent 75%, 
      transparent
      );
   background-size: 5px 5px;
}