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

Question

This question already has answers here:

Diagonal stripes that are 1px wide

(2 个回答)


4年前关闭。




我试图在 CSS 中创建一个对 Angular 线交叉影线图案作为背景。我从 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 有解决方法吗？

最佳答案

我似乎找不到完美的解决方案。这个 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;
}

关于css - 具有重复线性渐变的交叉影线效果导致图案不均匀，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41261840/

上一篇：angular - elementRef.createComponent 不是函数

下一篇：python - Pandas 循环自定义日期(月年)到(月年+N)进行绘图

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