使用DIV的可打印样式表

Question

我有一个网站，我正在尝试制作一个可打印的版本，我正在使用新的打印样式表，但我遇到了一个问题。我有一个星级的DIV，它只是html文件中的一个空DIV，但在常规的CSS中，我有实际星级的背景图像。

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或任何东西，但我不确定我可以做些什么来让它以可打印的格式显示出来。

我意识到这个问题可能有点模糊，但我不确定如何解释它。不过，如果需要的话，我绝对可以给出更多细节。谢谢!

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

EDIT 2:

您可以尝试将此代码放入打印样式表中：

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

这将使用CSS将一些文本放入div中，如果只将其放入打印样式表中，则只有在打印时才会出现！

Answer 2

尝试创建新的仅打印样式表...如下所示：

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

或在当前样式表中，将打印样式放入

@media print { 
}