3

印刷可能なバージョンを作成しようとしているサイトがあり、新しい印刷スタイルシートを使用していますが、問題があります。html ファイルには空の DIV である星評価用の 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;

  }

私の問題は、星評価が Web ページの印刷可能な形式でまったく表示されないことです。私は 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 に答える