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

您可以使用带有边框的类似内容：

$url = "http://ip:port/stats?sid=1";
$nice_url = urlencode($url);
$sc_stats = simplexml_load_file($nice_url);

echo $sc_stats->SERVERTITLE;
echo $sc_stats->BITRATE;
echo $sc_stats->SONGTITLE;

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

...但是这仅限于单行。如果您需要标记多行文字，则此操作无效。

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

1 个答案: