如何制作CSS背景网格线

NDO*_*DOE 3 css background css3

img


背景有四行。它们在整个部分中可见,但在图像上不可见。

怎么做?

adr*_*fek 7

就这么简单

body{
  background: linear-gradient(90deg, #eee 1%, transparent 1%) 1px 0, #fff;
  background-size: 200px 1px;
}
Run Code Online (Sandbox Code Playgroud)

演示:https : //codepen.io/anon/pen/VMzwNw

可以使用此站点生成这些以及许多其他背景-> http://lea.verou.me/css3patterns/#stairs

  • 这很棒。我设置 `background-position: -1px` 来删除最靠近浏览器边缘的左侧线,并将 `background-size` 设置为 `calc((100% / 8) + 0.2px)` ,从而删除最靠近右侧的线到浏览器边缘。我还将渐变宽度设置为“0.5%”而不是“1%”以使线条更细。 (2认同)