web-dev-qa-db-ja.com

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

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

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

-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>[email protected]</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>
cssgoogle-chromecss3printingwebkit
197
user2045025

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

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

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

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

Iはほとんどどのような状況でも!importantの使用を推奨しませんが、以下の定義は正しく機能し、問題を明らかにします。

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

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

これが フィドル （および印刷プレビューを簡単にするための 埋め込み ）です。

371
purgatory101

そのCSSプロパティはあなたが必要とするのはそれだけで私のために動作します... Chromeでプレビューするときあなたはそれを見るためのオプションを持っていますBWと色（色：オプション - 色または白黒）あなたがそのオプションを持っていない場合は、私はこのChrome拡張機能をつかみ、あなたの生活を楽にすることをお勧めします：

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

あなたがいじるに追加したサイトはあなたのメディアプリントCSSでこれを必要とします（あなたはそれを単に追加する必要があります...

メディア印刷CSSを本体に含める：

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

UPDATE[OK]をあなたの問題はbootstrap.cssです...それはあなたと同じようにメディアプリントCSSを持っています....あなたはそれを削除し、それはあなたに色を与えるはずです....あなたは自分自身でやるか、ブートストラップprint cssに固執する必要があります。

これをクリックすると色が見えます.... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

66
Riskbreaker

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

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

enter image description here

26
Travis J

これを表示するには、background-colorタグに!important属性を追加するだけで済みます。Webkitパーツは不要です。

background-color: #f5f5f5 !important;

26
Flea

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

<link rel="stylesheet" media="screen" href="">
10
Vyacheslav Cotruta

あなたのCSSはこのようなものでなければなりません：

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

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

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）から削除してください。

あるいは、あなたがあなた自身の@media printで印刷したいページのcssでこれらの値をオーバーライドする

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

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

より詳細なデモンストレーションのために私の フィドル を見てください。

6
Pete Fecteau

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

印刷プロセスに関連している可能性があります。 Webキットでもあるsafariでは、背景ダイアログと背景色を印刷するチェックボックスがプリンタダイアログにあります。

5
Bertrand

私は 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);
}

要素の前にCSSを作成するためのアイコンパスを見つける部分は、 this SO answer からのコピーです。

2
hilnius

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

1
Shreyan Bhowmick

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

ブートストラップは実行時にバックグラウンドカラーを印刷しないようにしないようにしないように決定します。良い仕事のブートストラップ...

1
Taugenichts

IEの場合

IEを使用している場合は、印刷プレビュー（[文書を右クリック - >印刷プレビュー]）に移動し、設定に移動して[背景色と画像を印刷する]オプションがあります。

enter image description here

0
PADMAJA SONWANE

ブートストラップを使用しているのであれば、これに対する最善の解決策は、1つの操作だけで、この中のすべてのコードを削除@ media print {}します。印刷プレビューを撮りながら、より多くの設定から背景グラフィックを有効にします。

0
Mohd. Shaizad

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

0
user2430846

ブートストラップを使用している場合は、カスタムCSSファイルでこのコードを使用してください。ブートストラップは、印刷プレビューですべての色を削除します。

@media print{
  .box-text {

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