可打印样式表与DIV

Question

我是一名有用的助手，会为您翻译以下内容。这是关于IT技术方面的问题，您希望将一个网站制作成一个可打印版本，并使用新的打印样式表，但遇到了问题。在常规的CSS中，DIV具有实际星级的背景图像，在HTML文件中，它仅是一个空DIV。

HTML文件中的DIV如下所示：

<div class="example_rating"></div>

常规样式表中的代码如下：

.example_rating {

  height:40px;

  width:200px;

  margin-left:20%;

  background: url('../stars.png') no-repeat scroll 0 0 transparent;

  }

我的问题是，星级评分在网页的可打印格式中根本没有显示出来。我没有将DIV隐藏或其他任何操作，但我不确定该怎么做才能使它在可打印格式中显示出来。

我知道这个问题可能有点模糊，但我不知道还有什么其他的解释方式。如果需要，我可以提供更多细节。谢谢！

- Stephen Roda

---

背景图片是显示评分但不打印的那个吗？ - GrantVS

你不能强制显示背景。也许你想用<img>替换它。或者一些“*****”的东西... - ezakto

是的，它只是没有显示在网页的打印友好版本上。但我不知道为什么。 - Stephen Roda

Answer 1

在CSS中，星星被渲染为背景图像，而在打印时，默认情况下不会显示背景。您要么将星星显示为<img>，要么告诉用户启用打印背景。编辑：最简单的方法是将星级评分作为文本和背景图像一起打印，然后使DIV内部的字体透明（并在打印样式表中为黄色）。 例如：

<div class="example_rating">
  4/5 stars.
</div>

样式表：

.example_rating {
  color:Transparent;
  /* Alternatively: text-indent: -9999px; */
  height:40px;
  width:200px;
  margin-left:20%;
  background: url('../stars.png') no-repeat scroll 0 0 transparent;
}

编辑 2:

你可以尝试将以下内容放入打印样式表中：

.example_rating {
  background: none;
}
.example_rating:after {
  content: '4/5 stars'
}

这将使用CSS在div中插入一些文本。如果你只将它放在打印样式表中，那么它只会在你打印时出现！

- Karl Nicoll

---

谢谢你的回答！不幸的是，这是一项任务，我不能编辑HTML文件。我必须想办法只用CSS使其工作，但我不确定是否可能 :/ - Stephen Roda

@stephen - 看看我的第二次编辑。它应该以一种hacky的方式实现你想要的功能，但它不适用于旧版本的Internet Explorer。 - Karl Nicoll

Answer 2

尝试制作一种新的仅打印样式表...就像这样:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

或者在您当前的样式表中，将打印样式放在

@media print { 
}

- Connor