图像上的PNG条纹图案-滚动时闪烁/闪烁

Question

我需要在html图像上添加非常细的条纹图案。由于多种原因，我不能真正将其添加到图像本身（图像在CMS中上传，必须在没有条纹的其他地方使用，并且我也希望图案保持未缩放状态，而图像却可以缩放... ）。

所以我用图案制作了一个透明的PNG，用一个伪元素将其放在图像上，并使用background-repeat将其循环到整个图像上（请参见代码段。）>

我的问题是，当我向下滚动页面时，图像会闪烁/闪烁。在Firefox和Chrome上进行了测试，结果相同。我尝试了其他不同的选择，例如使用非常大的条纹图像来避免背景重复，或者使用带有mix-blend-mode：multiply的非透明图像，但结果始终相同。

我还尝试了具有重复线性背景的纯css解决方案，但由于图案太薄，渲染效果不是很好。

我可以进行清晰渲染的唯一方法是在原始图像中嵌入图案，然后不闪烁，但是由于上述原因，这实际上不是一种选择。

任何想法？谢谢：-）

#container {
  position: relative;
}

#container:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://indelebil.fr/stripes.png) repeat;
}

img {
  display: block;
  max-width: 100%;
}
<div id="container">
  <img src="https://indelebil.fr/sample.jpg" />
</div>

我需要在html图像上添加非常细的条纹图案。由于多种原因，我不能真正将其添加到图像本身（图像是在CMS中上载的，必须在没有......>

Answer 1

我们可以用线性梯度来做到这一点