web-dev-qa-db-ja.com

印刷ページのdiv背景色が機能しない

background-colorのあるdivを使用したいのですが、ページを印刷すると白で表示されます。

<tr bgcolor="#333333">を使用してテーブルを作成しても、機能しません。

cssとhtmlを使用して印刷ページを作成するにはどうすればよいですか？

私のコード：

<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
   <tr bgcolor="#999999">
       <td align=right colspan=2><span style="font:bold 14px 'b nazanin';">Text</span></td>
   </tr>
</table>
htmlcssbackground-colorprint-preview
22
Ebad ghafoory

メディアクエリスタイルシートを印刷物にターゲティングする方法を調べます。私は、コンテンツのPDFを使用せずに、クロスブラウザーでやりたいことを実行する一般的な方法（ユーザーのプリンターが背景を印刷するかどうかを制御する）を見つけられないと思います。これは望ましくない/実行できない場合があります。ただし、印刷スタイルを特別に処理することを検討し、印刷ページのデザインで背景を回避することをお勧めします。

http://www.w3.org/TR/css3-mediaqueries/

[〜＃〜]編集[〜＃〜]

他のコメントを見て、背景を印刷する必要があり、1人のユーザーがいる場合は、プリンターに背景を印刷するようにユーザーに指示します。たとえば、Firefox（チェックボックス）を参照してください。

print backgrounds dialog Firefox

23
Jared Farrish

CSS：box-shadow: inset 0 0 0 1000px gold;

すべてのブラウザ、およびテーブルのセルと行で機能します。

22
KDawg

デフォルトでは、背景色と画像は印刷されません。

これは、ユーザーが変更できるプリンターオプションですが、ユーザーがそれを知っていたり、実行したりすることは絶対に期待できません。これをWeb側から制御することはできません（私の知る限り）。

18
Marek Musielak

固定サイズのブロック要素を使用していたので、ここでうまくいきました。使用される画像は1px X 1pxですが、ボックスのサイズに拡大する必要があります。このようにして、背景色/画像の代わりに画像を直接印刷します。

<style type="text/css">
.outer {
    width: 200px;
    height: 80px;
    position: relative;
}
.outer .grayBg {
    position: absolute;
    left: 0;
    top: 0;
    height: 80px;
    width: 100%;
    z-index: 1
}
.inner {
    width: 100%;
    position: relative;
    z-index: 10
}
</style>


<div class="outer"><img src="grayBg.png" class="grayBg" />
  <div class="inner">Some text</div>
</div>
2
srinikolli

ただし、そのために常に画像を使用することができます。幅が1pxの画像を作成し、次のように繰り返します。

background: url('path/to/image.png') repeat-x;
0
Boyye