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

Question

我注意到您可以使用，例如：

创建网格线

{{1}}

所以，我的问题是如何在不使用上述内容的情况下创建将在背景图像上显示的网格线？

Answer 1

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

以下是html示例：

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

带有数据网址的CSS：

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

那里有很多数据网址生成器。然后将其覆盖在您的图片上。