用水平线填充可打印页面主体空白区域的 CSS 配方

Question

我正在从数据库中提取元素详细信息，并编写一个动态 HTML 页面以在顶部打印这些元素详细信息。该页面的目的是在团队或其他 session 中记录有关元素的信息，我希望在元素详细信息之后的空间中出现线条。

我可以使用哪种 CSS 伪标记或 CSS 函数组合来用水平线填充页面的空白主体？

Answer 1

解决方案是在 after psuedo 标记中使用 css 函数 repeating-linear-gradient。

假设元素详细信息位于类名为 project_details 的元素中，CSS 将包含以下内容:

.project_details::after {
  content:          '';
  display:          block;
  width:            100%;
  height:           29cm;
  background:       repeating-linear-gradient(0deg,blue 0px, white 1px,white 30px);
}

content 属性是必需的，它是一个空字符串，用于强制浏览器使用选择器。如果未指定内容属性，则浏览器将忽略“after”选择器。

需要block、display和width，让浏览器知道要填充的空间的物理尺寸。在提供的解决方案中，宽度是页面宽度的 100%，而高度大约是一张 A4 尺寸纸张的高度。

背景是一个重复的线性渐变，带有一条 1 像素宽的蓝线和一个 29 像素的空白。 0deg 表示水平渐变。第一个像素(像素 0)的渐变从蓝色变为白色，像素 1 到第 30 个像素从白色变为白色并重复。

有几个潜在的陷阱:

1. 浏览器的打印渲染可能要求线宽大于 1px 以确保打印所有行。
2. 打印对话框可能默认为标记为关闭的“背景图形”，需要将其打开才能使线条可见。