我需要在 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>