带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中,如果只将它放在打印样式表中,它只会在打印时出现!