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

【问题标题】：PNG stripe pattern over image - blinking/flashing when scrolling图像上的 PNG 条纹图案 - 滚动时闪烁/闪烁
【发布时间】：2020-08-27 03:15:38
【问题描述】：

我需要在 html 中的图像上添加一个非常细的条纹图案。由于多种原因，我无法真正将其添加到图像本身（图像在 CMS 中上传，必须在没有条纹的其他地方使用，而且我还希望图案保持未缩放，而图像确实缩放...... )。

所以我用图案制作了一个透明的 PNG，用伪元素把它放在图像上，然后使用 background-repeat 循环它在整个图像上（参见 sn-p）。

我遇到的问题是当我向下滚动页面时图像闪烁/闪烁。在 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>

【问题讨论】：

在我看来这不是 CSS 的问题，而是浏览器本身的监控和渲染引擎。线条要细（1px）才能在滚动时在每个状态下正确显示（始终相同）。证明 - 将页面缩放到 110% 或 120% - 线条看起来很奇怪，因为这样就无法适应像素，显示器必须以某种方式模仿它。然后放大到 150% - 工作正常。直线可以，但你的旋转了 45 度，它只能失败。
您可能是对的，这是一个“亚像素”问题，但是如果将图案直接打印在图像上（光栅化），则不会出现闪烁效果，这就是我想知道的原因还有另一种方法可以让渲染引擎处理得更好......

标签： css png background-image flashing

【解决方案1】：

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

无需使用strips.png

body {
    height: 300vh;
}

#container {
    position: relative;
    overflow: hidden;
}

#container:after {
    content: '';
    position: absolute;
    top: -200vh;
    left: 0;
    right: 0;
    bottom: 0;
    width: 200vw;
    height: 400vh;
    background-size: 3px 44px;
    background-repeat: repeat;
    background-image: linear-gradient(to left, transparent -5px, #000000a3 8px, transparent 26px, transparent);
    transform: rotate(-45deg) scale(1.5);
}

img {
    display: block;
    max-width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack Overflow</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="container">
    <img src="https://indelebil.fr/sample.jpg" />
</div>
</body>
</html>

【讨论】：

谢谢，是的，但这不是我们想要的渲染，我们使用了更细的线条......但它们不能用纯 css 渲染好：-/

【解决方案2】：

我终于找到了一种解决方法，通过降低图案不透明度，闪烁效果往往会消失，它仍然存在，但在 0.6% alpha 下变得可以接受。

顺便说一句，如果有人有更好的方法来保持 100% 不透明度，我会很高兴听到这个消息！

#container {
  position: relative;
}

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

img {
  display: block;
  max-width: 100%;
}

<div id="container">
  <img src="https://indelebil.fr/sample.jpg" />
</div>

【讨论】：