如何制作CSS背景网格线

Question

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

如何制作？

Answer 1

这很简单

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

DEMO：https://codepen.io/anon/pen/VMzwNw

可以使用此网站生成这些和许多其他背景 - ＆gt; http://lea.verou.me/css3patterns/#stairs

Answer 2

您可以使用CSS线性渐变和多个背景来实现此目的。这是一个例子：

＆＃13;

＆＃13;

div {
  height: 100px;
  background-color: transparent;
  background-size: 25% 100%;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, black 1px, transparent 1px);
  background-position: 12.5%;
}

＆＃13;

<div>
</div>

＆＃13;

＆＃13;

＆＃13;

渐变绘制一条垂直线，而background-size，background-position和background-repeat组合使垂直线重复。

这是一个背景图片和垂直线的示例：

＆＃13;

＆＃13;

div {
  height: 100px;
  background-color: transparent;
  background-size: 25% 100%, cover;
  background-repeat: repeat-x, no-repeat;
  background-image: linear-gradient(to right, black 1px, transparent 1px), url(http://lorempixel.com/400/200/);
  background-position: 12.5%, center;
}

＆＃13;

<div>
</div>

＆＃13;

＆＃13;

＆＃13;