DIVで印刷可能なスタイルシート

Question

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

    } 

私の問題は、スター評価が表示されないということですウェブページの印刷可能な形式では全くありません。私はDIVを隠したり何かを持っているわけではありませんが、印刷可能な形式で表示するために何ができるのか分かりません。

私は少し漠然としているかもしれないが、他の方法を説明することができないと思います。私は間違いなく必要があればもっと詳しく説明することができます。ありがとう！

Answer 1

であなたの印刷スタイルを入れ、

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

それともにおける現在のスタイルシートは、星がレンダリングされています印刷時には背景が通常はデフォルトでは表示されません。

星を<img>として表示するか、ユーザーに背景の印刷を有効にする必要があります。

EDIT：

このラウンドを取得する最も簡単な方法は、テキストなどとして背景画像を星評価を印刷した後、透明（と黄色の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; 
} 

EDIT 2：

あなたの印刷スタイルシートでこれを入れてみてください：

.example_rating { 
    background: none; 
} 
.example_rating:after { 
    content: '4/5 stars' 
} 

これは内部でいくつかのテキストを置きますdivをCSSを使用して作成し、それをあなたの印刷スタイルシートにのみ入れると、あなたが印刷するときにのみ表示されます！

Answer 2

次のように...唯一のスタイルシートに新しいプリントを作ってみましょう：あなたのCSSで

@media print { 
}