HTML/CSS 水平线标记页面高度

Question

我是。构建一个长 HTML 页面，我想要一条水平线来显示每个 A4（29.7 厘米）页面将在哪里断裂，以便我可以将我的内容放入其中。我如何设置背景以每隔 29.7 厘米显示这条线，然后在其上构建内容？

目前我只是使用打印预览和边距来手动在页面上上下移动页面，但这在很大程度上是一个反复试验的情况。

Answer 1

您可以通过使用 CSS 来实现这一点。您可以在body标签上创建一个伪元素并将其高度设置为29.7cm。然后，您可以为这个伪元素设置一个背景图像，它是一条水平线。这是一个例子：

body::after {
  content: "";
  display: block;
  height: 29.7cm;
  background-image: url("path/to/horizontal/line/image.png");
  background-repeat: repeat-x;
  background-position: top left;
}