印刷プレビューに背景色が表示されない

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

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

-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>

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

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

多くの場合、追加の@media printCSSを設定するだけでは不十分です。印刷時に他のすべてのCSSが含まれているためです。これらの場合、印刷ルールは印刷以外の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;
    }
}

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

そのCSSプロパティはあなたがそれが私のために機能するのに必要なすべてです... Chromeでプレビューするとき、あなたはそれをBWとColor（Color：Options- ColorまたはBlack and white）を表示するオプションがありますので、そのオプションがない場合は、この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/

Chromeでは、背景のグラフィック設定がオフになっていると、印刷時に背景色やその他のいくつかのスタイルがレンダリングされません。

これは、css、@ media、または特定性とは何の関係もありません。あなたはおそらくそれを回避することができますが、クロムに背景色や他のグラフィックスを表示させる最も簡単な方法は、詳細設定の下にあるこのチェックボックスを適切にチェックすることです。

!important表示するためにbackground-colorタグに属性を追加する必要があるだけで、webkitパーツは必要ありませんでした。

background-color: #f5f5f5 !important;

ブートストラップまたは他のサードパーティのCSSを使用している場合は、必ずメディア画面を指定し、独自のCSSファイルで印刷メディアタイプを制御できるようにします。

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

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

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

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;   
}

BOOTSTRAP.CSSを使用する場合は、これが修正です。

私はすべての解決策を試したが、bootstrap.cssに@media printすべての色、背景色、影などをリセットする非常に迷惑なことがわかったまで、それらは機能していなかった...

@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}

したがって、このセクションをbootstrap.css（またはbootstrap.min.css）から削除します

または、独自に印刷するページのCSSでこれらの値をオーバーライドします @media print

@media print {
  body { 
    -webkit-print-color-adjust: exact; 
  }
  .customClass{
     //customCss + !important;
  }
  //more of your custom css
}

@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は、1px x 1pxピクセルの＃404040を使用してPNGにしています。ユーザーが画像を有効にしている場合は機能する可能性があり、そうでない場合は...
• それが機能しない場合は、ボックスの影を設定します...
• ボーダー=希望するボックスの高さおよび/または幅、ソリッド、カラーの1/2。上記の例では、60pxの高さのボックスが必要でした。
• border属性で何を制御しているかに応じて、高さ/幅をゼロにします。
• 重要な使用しない限り、フォントの色はデフォルトで黒になります
• line-heightを0に設定して、ボックスに物理的な寸法がないことを修正します。
• 独自のPNGを作成してホストする:-)
• ブロック内のテキストを折り返す必要がある場合は、それをdivに入れ、position：relativeを使用してdivを配置します。そして、行の高さを削除します。

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

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

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

IEの場合

IEを使用している場合は、印刷プレビュー（ドキュメントを右クリック->印刷プレビュー）に移動し、設定に移動し、「背景の色とイメージを印刷する」オプションがあります。そのオプションを選択して試してください。

@media print {* ,: after、：before ....}の下のブートストラップcssファイルには、！importantというラベルの付いた色と背景のスタイルがあり、要素の背景色がすべて削除されています。それらの2つのCSSを殺すとうまくいきます。

Bootstrapは、印刷物に背景色を含めないように決定しています。そのため、CSSを編集するか、優先順位の高い別の重要なスタイルを使用する必要があります。よくできたブートストラップ...

私はpurgatory101の回答を使用しましたが、すべての色（アイコン、背景、テキストの色など）を維持するのに問題がありました。特に、CSSスタイルシートは、DOM要素の色を動的に変更するライブラリでは使用できません。したがって、次のスクリプトは、印刷前に要素のスタイル（background-colourおよびcolour）を変更し、印刷が完了するとスタイルをクリアします。@media printページ構造に関係なく機能するため、スタイルシートに大量のCSSを記述しないようにすると便利です。

FontAwesomeアイコンの色（または:beforeセレクターを使用して色付きコンテンツを挿入する要素）を維持するために特別に作成されたスクリプトの一部があります。

動作中のスクリプトを示すJSFiddle

互換性： Chromeで動作し、他のブラウザーはテストしていません。

function setColors(selector) {
  var elements = $(selector);
  for (var i = 0; i < elements.length; i++) {
    var eltBackground = $(elements[i]).css('background-color');
    var eltColor = $(elements[i]).css('color');

    var elementStyle = elements[i].style;
    if (eltBackground) {
      elementStyle.oldBackgroundColor = {
        value: elementStyle.backgroundColor,
        importance: elementStyle.getPropertyPriority('background-color'),
      };
      elementStyle.setProperty('background-color', eltBackground, 'important');
    }
    if (eltColor) {
      elementStyle.oldColor = {
        value: elementStyle.color,
        importance: elementStyle.getPropertyPriority('color'),
      };
      elementStyle.setProperty('color', eltColor, 'important');
    }
  }
}

function resetColors(selector) {
  var elements = $(selector);
  for (var i = 0; i < elements.length; i++) {
    var elementStyle = elements[i].style;

    if (elementStyle.oldBackgroundColor) {
      elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance);
      delete elementStyle.oldBackgroundColor;
    } else {
      elementStyle.setProperty('background-color', '', '');
    }
    if (elementStyle.oldColor) {
      elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance);
      delete elementStyle.oldColor;
    } else {
      elementStyle.setProperty('color', '', '');
    }
  }
}

function setIconColors(icons) {
  var css = '';
  $(icons).each(function (k, elt) {
    var selector = $(elt)
      .parents()
      .map(function () { return this.tagName; })
      .get()
      .reverse()
      .concat([this.nodeName])
      .join('>');

    var id = $(elt).attr('id');
    if (id) {
      selector += '#' + id;
    }

    var classNames = $(elt).attr('class');
    if (classNames) {
      selector += '.' + $.trim(classNames).replace(/\s/gi, '.');
    }

    css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }';
  });
  $('head').append('<style id="print-icons-style">' + css + '</style>');
}

function resetIconColors() {
  $('#print-icons-style').remove();
}

そして、window.print印刷前にスタイルを設定し、後でリセットするように関数を変更します。

window._originalPrint = window.print;
window.print = function() {
  setColors('body *');
  setIconColors('body .fa');
  window._originalPrint();
  setTimeout(function () {
    resetColors('body *');
    resetIconColors();
  }, 100);
}

：before要素のCSSを作成するためのアイコンパスを見つける部分は、このSO回答からのコピーです

box-shadowプロパティを使用することもできます。

あなたが使用している場合、ブートストラップは、あなたのカスタムCSSファイルにこのコードを使用.just。Bootstrapは、印刷プレビューですべての色を削除します。

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}

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

ブートストラップを使用している場合の最善の解決策は、@ media print {}内のすべてのコードを削除することです。印刷プレビューを取りながら、より多くの設定から背景グラフィックスを有効にします。

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

これを試して ：

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

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