如何在css中的图像上创建网格线？

Question

我注意到，您可以使用以下命令创建网格线，例如：

background-image: repeating-linear-gradient(0deg,transparent,#CCC 0,transparent 3px,transparent 10%), repeating-linear-gradient(-90deg,transparent,#CCC 0,transparent 3px,transparent 10%);}

所以，我的问题是，在不使用上述方法的情况下，如何创建位于背景图像顶部的网格线？

Answer 1

您可以使用数据URL！https://codepen.io/tutorialsetc/pen/IEuFq

下面是一个html示例：

<div class="patterns">
<p class="pattern09"></p>
</div>

和带有数据url的CSS：

.pattern09{
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAQAAADl0Z2xAAAAEElEQVQIHWNgYGD4b8UABgAJmgE6cUJg+wAAAABJRU5ErkJggg==);
}

有很多数据url生成器。然后把它覆盖在你的图像上。