0

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

所以我用图案制作了一个透明的PNG，用一个伪元素把它放在图像上，然后使用背景重复在整个图像上循环它（见片段）。

我遇到的问题是当我向下滚动页面时图像闪烁/闪烁。在 Firefox 和 Chrome 上测试，结果相同。我尝试了不同的其他选项，例如使用非常大的条纹图像来避免背景重复，或者使用带有混合混合模式的非透明图像：乘法，但结果始终相同。

我还尝试了具有重复线性背景的纯 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>

4

2 回答 2

0

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

无需使用 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>

于 2020-05-11T15:27:35.373 回答
0

我终于找到了一种解决方法，通过降低图案不透明度，闪烁效果往往会消失，它仍然存在，但在 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>

于 2020-05-13T14:16:40.047 回答