我需要在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>
答案 0 :(得分: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>
答案 1 :(得分: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>