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

编辑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 { 
}