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