強制的にHTMLで背景イメージを印刷するには？

Question

私はそれに背景画像のカップルがあるレポートページを印刷する必要があります。しかし、これらの画像だけが印刷可能ではありません。これらの画像は、実際にはグラフのためのロゴであり、レポートでは非常に重要です。

私はそれらをトリミングしてページとしてタグに含めることができる別のオプションがありますが、これは最後のオプションです。その前に、これらのイメージを強制的に印刷する方法があるかどうかを知りたいと思いますか？誰か助けてくれますか？

Answer 1

デフォルトでは、ブラウザはページを印刷するときにバックグラウンドCSSルールを無視し、CSSを使用してこれを克服することはできません。

ユーザーはブラウザの設定を変更する必要があります。

したがって、印刷する必要がある画像は、CSSの背景ではなくインライン画像としてレンダリングする必要があります。 cssを使用すると、印刷用にのみインラインイメージを表示することができます。このようなもの。

HTML

<div class"graph-image graph-7"> 
    <img src="graph-7.jpg" alt="Graph Description" /> 
</div> 

CSS

.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;} 
.graph-image img{display: none;} 

@media print{ 
    .graph-image img{display:inline;} 
} 

このコードを使用して、または類似のコードは、画像は、CSSに一度HTMLで、一度に使用されることを意味します。 htmlのバージョンはcssを使用して表示されず、印刷のために通常通り表示されます。これはハックですが、あなたがしたいことをします。画像が印刷されます。

あなたがしていることはひどく悪いことです。意味のある情報をユーザーに伝えるものは、cssだけでは伝えられません。意味的に間違っているだけでなく、グラフがユーザーにとってあまり役に立たなくなります。インラインイメージははるかに優れています。できればそれを使用する必要があります。

Answer 2

それはあなたが追加グーグルクロームで働く！背景画像への重要な属性は、必ず最初に属性を追加作成し、もう一度試して、あなたはまた、あなたがこれらの有益な印刷ロールを使用することができますTHA

.class-name { 
    background: url('your-image.png') !important; 
} 

のようにそれを行うことができていますそして

@media print { 
* { 
    -webkit-print-color-adjust: exact !important; /*Chrome, Safari */ 
    color-adjust: exact !important; /*Firefox*/ 
    } 
}