时间戳

首页 > 解决方案 > CSS 以可打印的方式突出显示文本

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

问题描述

我有以下代码突出显示文本

<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 以一种无需用户更改默认设置即可打印的方式突出显示文本？

标签： css

解决方案

您可以使用边框使用类似的东西：

.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>

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

推荐阅读