css - css 图像上的白色条纹？

Question

我需要在图像上制作白色条纹 Like this在标题图片上有 child 的，有一些白色条纹。同样的白色条纹可以显示在下面的可持续发展报告图像上。尽管他们使用的图像具有这些条纹。知道如何在任何图像的 css 或 css3 中实现它。

Answer 1

这个或它的一些变体应该可以工作:

HTML:

<div class="image"><img src="whatever-you-like.gif"><div></div></div>

CSS:

.image { position: relative; }
.image div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(stripes.png); }

Stripes.png 必须是具有低 alpha 值的 24 位 PNG 图像。

请注意，在此实现中，您不必使用原始图像作为 CSS 背景，您可以像往常一样使用图像标签(只是在其周围添加一些额外的 HTML)。