3

我有一个网站，我正在尝试制作可打印版本，并且正在使用新的打印样式表，但我遇到了问题。我有一个用于星级评定的 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 或任何东西，但我不确定我能做些什么才能让它以可打印的格式显示。

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

4

2 回答 2

5

在您的 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 中，如果您仅将其放入打印样式表中，它只会在您打印时出现！

于 2012-04-15T22:58:08.100 回答
-1

尝试制作一个新的仅打印样式表......像这样：

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

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

@media print { 
}
于 2012-04-15T22:57:49.103 回答