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

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重复8次后，在接下来的6次迭代中，线条变为2px宽，然后再回到正确的1px宽度。

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

Chrome和Opera是否有解决方法？

Answer 1

我似乎找不到完美的解决方案。此JSFiddle中的Stack Overflow Question - "Diagonal stripes in CSS that are 1px wide" 似乎与此CSS-Tricks tutorial

底部附近提到的并发症一致

.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;
}