273

ページを印刷しようとしています。そのページでは、テーブルに背景色を指定しました。クロムで印刷プレビューを表示すると、背景色のプロパティが表示されません...

だから私はこのプロパティを試しました：

-webkit-print-color-adjust: exact;

しかし、まだ色が表示されていません。

http://jsfiddle.net/TbrtD/

.vendorListHeading {
  background-color: #1a4567;
  color: white;
  -webkit-print-color-adjust: exact; 
}


<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
  <table class="table" style="margin-bottom: 0px;">
    <thead>
      <tr class="vendorListHeading" style="">
        <th>Date</th>
        <th>PO Number</th>
        <th>Term</th>
        <th>Tax</th>
        <th>Quote Number</th>
        <th>Status</th>
        <th>Account Mgr</th>
        <th>Shipping Method</th>
        <th>Shipping Account</th>
        <th style="width: 184px;">QA</th>
        <th id="referenceSO">Reference</th>
        <th id="referenceSO" style="width: 146px;">End-User Name</th>
        <th id="referenceSO" style="width: 118px;">End-User's PO</th>
        <th id="referenceSO" style="width: 148px;">Tracking Number</th>
      </tr>
    </thead>
    <tbody>
      <tr class="">
        <td>22</td>
        <td>20130000</td>
        <td>Jim B.</td>
        <td>22</td>
        <td>510 xxx yyyy</td>
        <td>zznn@abc.co</td>
        <td>PDF</td>
        <td>12/23/2012</td>
        <td>Approved</td>
        <td>PDF</td>
        <td id="referenceSO">12/23/2012</td>
        <td id="referenceSO">Approved</td>
      </tr>
    </tbody>
  </table>
</div>
4

18 に答える 18

494

ChromeCSSプロパティ-webkit-print-color-adjust: exact;は適切に機能します。

ただし、印刷用の正しいCSSがあることを確認するのは、多くの場合注意が必要です。あなたが抱えている困難を回避するために、いくつかのことができます。まず、すべての印刷CSSを画面CSSから分離します。これは、@media printおよびを介して行われ@media screenます。

多くの場合、印刷時に他のすべてのCSSが含まれているため、追加のCSSを設定するだけ@media printでは不十分です。このような場合、印刷ルールは非印刷CSSルールに自動的に勝つことはないため、CSSの特異性に注意する必要があります。

あなたの場合、-webkit-print-color-adjust: exactは機能しています。ただし、あなたbackground-colorと色の定義は、より高い特異性を持つ他のCSSによって打ち負かされています。

私はほとんどすべての状況での使用を推奨していませんが!important、次の定義が正しく機能し、問題を明らかにします。

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        -webkit-print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

これがフィドルです（そして印刷プレビューを簡単にするために埋め込まれています）。

于 2013-03-06T17:08:26.820 に答える
92

そのCSSプロパティはあなたが私のために働くのに必要なすべてです...Chromeでプレビューするとき、あなたはそれをBWとColor（色：オプション-色または白黒）で見るオプションがあります、それであなたがそのオプションを持っていないなら、このChrome拡張機能を入手して、生活を楽にすることをお勧めします。

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en

あなたがフィドルに追加したサイトはあなたのメディアプリントCSSでこれを必要とします（あなたはそれを追加する必要があるだけです...

メディアは本文にCSSを印刷します。

@media print {
body {-webkit-print-color-adjust: exact;}
}

UPDATE OKなので、問題はbootstrap.cssです...メディアプリントのcssがありますが、それを削除すると、色が表示されます。自分で行うか、固執する必要があります。ブートストラップはcssを出力します。

これを印刷をクリックすると、色が表示されます 。http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

于 2013-02-28T17:29:50.480 に答える
11

CSS は次のようにする必要があります。

@media print {
   body {
      -webkit-print-color-adjust: exact;
   }
}

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;   
}
于 2015-08-06T22:02:53.233 に答える
11

ブートストラップまたはその他のサード パーティの CSS を使用している場合は、メディア スクリーンのみを指定して、独自の CSS ファイルで印刷メディア タイプを制御できるようにしてください。

<link rel="stylesheet" media="screen" href="">

于 2015-12-16T09:51:22.057 に答える
6

@media printスタイルシートで次を使用します。

h1 {
    background-color:#404040;
    background-image:url("img/404040.png");
    background-repeat:repeat;
    box-shadow: inset 0 0 0 1000px #404040;
    border:30px solid #404040;
    height:0;
    width:100%;
    color:#FFFFFF !important;
    margin:0 -20px;
    line-height:0px;
}

注意すべき点がいくつかあります。

  • background-color は絶対的なフォールバックであり、主に後世のためにあります。
  • background-image は、PNG 化された #404040 の 1px x 1px ピクセルを使用します。ユーザーが画像を有効にしている場合は機能する可能性がありますが、そうでない場合は...
  • それがうまくいかない場合は、ボックスシャドウを設定してください...
  • ボーダー = ボックスの希​​望の高さおよび/または幅の 1/2、単色、色。上記の例では、60px の高さのボックスが必要でした。
  • ボーダー属性で制御しているものに応じて、高さ/幅をゼロにします。
  • !important を使用しない限り、フォントの色はデフォルトで黒になります。
  • 物理的な寸法を持たないボックスを修正するには、line-height を 0 に設定します。
  • 独自の PNG を作成してホストします :-)
  • ブロック内のテキストを折り返す必要がある場合は、それを div に配置し、position:relative; を使用して div を配置します。行の高さを削除します。

より詳細なデモについては、私のフィドルを参照してください。

于 2013-05-24T16:08:09.343 に答える
5

これはCSSの問題ですか？この問題に関する Google の投稿がいくつかあります: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

印刷工程に関係している可能性があります。同じく Webkit である safari には、プリンター ダイアログに背景画像と色を印刷するためのチェックボックスがあります。

于 2013-03-06T17:09:45.563 に答える
2

@media print{*,:after,:before ....} の下のブートストラップ css ファイルには、!important というラベルの付いた色と背景のスタイルを持つスタイルがあり、要素の背景色を削除します。これら 2 つの CSS を削除すると、機能します。

Bootstrap は、プリントに背景色を使用してはならないという実行上の決定を行っているため、css を編集するか、優先度の高い別の !important スタイルを使用する必要があります。頑張れブートストラップ...

于 2016-05-31T15:38:32.710 に答える
1

!important でインライン CSS スタイルを使用できます。例えば。

<p style="background:red!important">ABCD</p>
于 2021-04-09T05:59:22.747 に答える
0

「印刷メディア スタイル」オプションなしで Bootstrap をダウンロードした場合、この問題は発生せず、bootstrap.css ファイルで「@media print」コードを手動で削除する必要はありません。

于 2016-06-17T19:54:08.697 に答える
-1

外部 CSS ソース ファイルをダブル ロードし、media="screen" を media="print" に変更すると、テーブルのすべての境界線が表示されました

これを試して ：

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

<link rel="stylesheet" media="screen" href="bootstrap.css" />
于 2016-12-19T12:51:20.147 に答える