CSS 以可打印的方式突出显示文本

Question

我有以下高亮文本的代码

<style>
  .yellow-bg {
    background-color:yellow;
  }
</style>

<span class="yellow-bg">This is some text</span>

这在浏览器中有效，但在打印时文本不会突出显示，除非用户深入了解他们的打印设置并选中“打印背景图形”。我可以用

强制它在 Chrome 中打印

body {
  -webkit-print-color-adjust: exact !important;
}

但这在 Internet Explorer 中不起作用。

有什么方法可以使用 CSS 高亮显示文本，而无需用户更改其默认设置即可打印？

Answer 1

你可以使用像这样的带边框的东西:

.yellow-bg {
  display:inline-block;
  overflow:hidden;
  position:relative;
  vertical-align:top;
}
.yellow-bg::after {
  content:'';
  border:100vw solid yellow; 
  position:absolute;
  top:0;
  left:0;
  height:0;
  width:0;
  z-index:-1;
}

<span class="yellow-bg">This is some text</span>

您也可以使用此解决方案来标记段落中的一些文本:

.yellow-bg {
  display:inline-block;
  overflow:hidden;
  position:relative;
  vertical-align:top;
}
.yellow-bg::after {
  content:'';
  border:100vw solid yellow; 
  position:absolute;
  top:0;
  left:0;
  height:0;
  width:0;
  z-index:-1;
}

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <span class="yellow-bg">sed diam nonumy eirmod tempor invidunt</span> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

...但这仅限于单行。如果您需要标记多行文本，这是行不通的。