web-dev-qa-db-ja.com

CSS @media印刷の背景色に関する問題。

私はこの会社でここに来たばかりで、数マイルのCSSを使用する製品があります。アプリの印刷可能なスタイルシートを作成しようとしていますが、background-colorで@media printに問題があります。

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

他のすべてが機能し、境界線などを変更できますが、background-colorは印刷されません。これで、詳細なしでは質問に答えられないかもしれません。以前にこの問題、または同様の問題が発生した場合、私はちょうど興味がありました。

cssmedia-queries
157
Weston Watson

ユーザーが印刷設定で「背景色と画像の印刷」をオフにしている場合、CSSはそれを上書きしないため、常にそれを考慮してください。 これはデフォルト設定です。

背景色と画像を印刷するように設定すると、そこにあるものが機能します。

別の場所にあります。 IE9betaでは、[印刷]-> [ページオプション]の[用紙オプション]にあります。

FireFoxでは、[オプション]の下の[ページ設定]-> [フォーマットとオプション]タブにあります。

209
Ryan Ternier

Chromeでバックグラウンド印刷を有効にするには：

body {
  -webkit-print-color-adjust: exact !important;
}
211
drolex

GOT iT-質問が数年前に「閉じられた」場合でも:)
CSS：box-shadow：inset 0 0 0 1000px gold;
テーブルセルを含むすべてのボックスに対応!!!
（PDF-printer出力ファイルが信じられる場合..？）
-Chrome + Ubuntu上のFirefoxでのみテスト...

74
T4NK3R

これを試してください、それはGoogle Chromeで私のために働いた：

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>
33
MAXE

-webkit-print-color-adjust: exact;単独is Not enough属性で!importantを使用する必要があります

これはchromeafterの印刷プレビューです。各タグの!importantおよびcolor attrubuteにbackground-colorを追加しました

printing preview on chrome

これは、chromebeforeに!importantを追加してプレビューを印刷しています

enter image description here

inject!importantをdivのスタイルに合わせる方法を知るには、この回答を確認してください 「！important」ルールでスタイルを挿入することはできません

20
Basheer AL-MOMANI

動作する2つのソリューション（現代のChromeで-少なくともテストされていない）：

  1. ！通常のcss宣言の重要な権利（@media printでさえ）
  2. Svgを使用する
10
yar1

「プリンターフレンドリー」ページを作成する場合は、@ media印刷CSSに「！important」を追加することをお勧めします。これにより、ほとんどのブラウザで背景画像や色などを印刷することができます。

例：

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
7
nuts-n-beer

クロムについては、私はこのようなものを使用しましたが、うまくいきました。

Bodyタグ内で、

<body style="-webkit-print-color-adjust: exact;"> </body>

または、特定の要素について、テーブルがあり、td、つまりセルを埋めたい場合、

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
5
Aamir Shaikh

あなたができる別のトリックがありますwithout他の投稿で言及されている印刷ボーダーオプションを有効にします。境界線はで印刷されるため、このハックを使用して単色の背景色をシミュレートできます。

.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}

クラスを要素に追加してアクティブにします：

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

これには、背景色を表示するためにいくつかの余分なコードといくつかの余分な注意が必要ですが、それはまだ私に知られている唯一の解決策です。

このハックはdisplay: block;またはdisplay: table-cell;以外の要素では機能しないことに注意してください。たとえば、<table class="your-background">や<tr class="your-background">は機能しません。

これを使用して、すべてのブラウザーで背景色を取得します（IE9 +が必要です）。

5
kernel

!importantの使用は一般的には眉をひそめていますが、これはbootstrap.cssの問題のコードであり、background-colorで表の行が印刷されないようにします。

.table td,
.table th {
    background-color: #fff !important;
}

次のHTMLのスタイルを設定しようとしていると仮定しましょう。

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

このCSSをオーバーライドするには、スタイルシートに次の（より具体的な）ルールを配置します。

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

これは、ルールがbootstrapデフォルトよりも具体的であるため機能します。

4
The Aelfinn

背景色も「印刷」されていないGoogle Apps Scriptのhtml出力からPDFを生成しようとしたときに同様の問題があったため、この問題が見つかりました。

もちろん-webkit-print-color-adjust:exact;と!importantのソリューションは機能しませんでしたが、box-shadow: inset 0 0 0 1000px gold;は機能しました...素晴らしいハック、ありがとうございました:)

3
logol

最近の印刷CSSの経験から、最近の2015年の関連援助を追加すると思いました。

印刷ダイアログボックスの設定に関係なく、背景と色を印刷できました。

これを行うには、！important＆-webkit-print-colorの組み合わせを使用する必要がありました-adjust：exact！important適切に印刷するための背景と色を取得します。

また、色を宣言するとき、最も頑固な領域はターゲットに直接定義する必要があることがわかりました。例えば：

<div class="foo">
 <p class="red">Some text</p>
</div>

そしてあなたのCSS：

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always Paint the p */
2
Jonathan

私が見つけた最良の「解決策」は、バックグラウンドを有効にするためにプリンタ設定を調整する必要があることを大胆に、簡潔かつ簡潔に説明する小さなダイアログボックスをポップアップする顕著な「印刷」ボタンまたはリンクを提供することですおよび画像印刷。これは私にとって非常に成功しています。

1
alano

場合によっては（コンテンツを含まないが背景を含むブロック）、境界を使用して、ブロックごとに個別にオーバーライドできます。

例えば：

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}
1
Gedeon

テスト済みおよび動作中 2016/10年までにChrome、Firefox、OperaおよびEdgeで。どのブラウザでも動作し、常に期待どおりに見えるはずです。

わかりました、背景色を印刷するために少しクロスブラウザー実験をしました。コピーして貼り付けてお楽しみください！

これは、ブートストラップ用の完全な印刷可能なHTMLページです。

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>
1
Heroselohim

タグcanvasを使用して、IE9、Gecko、およびWebkitで機能する背景を「描画」できます。

0
Thomas Lecavelier

not印刷スタイルシート内でbackground-colorを設定します。通常のcssファイルで属性を設定するだけで、問題なく動作します:)

この例をチェックしてください： ヘッダーとフッターを使用した究極の印刷HTMLテンプレート

デモ： ヘッダーとフッターのデモを含む究極の印刷HTMLテンプレート

0
Dryden Williams

背景色の代わりに画像（または背景色のある画像）を使用してもかまわない場合、FireFox、Chrome、およびIEでも上書きなしで以下のソリューションが機能しました。ページのどこかに画像を設定し、ユーザーが印刷するまで非表示にします。

背景画像のあるページのhtml

<img src="someImage.png" class="background-print-img">

Css

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}

0
ksealey