HTML span 元素未打印

Question

我正在创建一个自定义彩色图例，并尝试使用自定义 CSS 添加

<span>

以使用

background-color

创建一个圆形，如 example 中所示。

浏览器（至少Chromium）的打印预览和实际PDF打印不显示。

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

<span class="dot"></span>

这很奇怪，我想知道原因以及如何解决它。

Answer 1

默认情况下，浏览器不打印背景以节省墨水。

您的元素只有背景（没有边框，没有内容...），因此它完全不会显示在打印预览上（但仍然占用空间）。

如果您确实想打印它们（例如，如果您将页面另存为 PDF），则必须选中打印对话框中的“打印背景”选项。