CSS @mediaのbackground-colorに関する問題。

176

私はこの会社の新人であり、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、印刷には反映されません。これで、詳細がわからないと、質問に答えられない可能性があることを理解しています。誰かが以前にこの問題または同様の問題を抱えていたのかどうか知りたかっただけです。

css  media-queries 
— ウェストン・ワトソン
ソース
W3C CSS-Validator（jigsaw.w3.org/css-validator）を渡します。それは奇妙だ
— 後藤
これはもはや問題にはなりません。ブートストラップページがあり、ブートストラップに@media printテーブルから背景色（ストライプなど）を削除するクエリがあるため、この問題が発生しました。
— マーティントーマ2017
@MartinThomaどのように問題を解決しましたか？テンプレート化されたブーストラップからCSSを削除しましたか？
— EduLopez

回答:

242

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

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

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

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

— ライアン・テルニエ
ソース
10
すばらしい、このCSSに頭を悩ませる時間を数時間節約できました。
— Weston Watson
162
ChromeとSafariでは、CSSスタイル「-webkit-print-color-adjust：exact;」を追加できます。背景色や画像を強制的に印刷する要素に
— 追加
11
@MarcoBettioloは最新のWebkitビルドでは機能しないようですが、重要です
— Hedde van der Heide、
2
ルールに！importantを追加すると、それも解決されました。
— チアゴドゥアルテ2015年
14
これを拡張するために、私はcolor-adjustを追加しました。FFが機能するように。だから私の完全なコードは*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
— BitBug 2017
252

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

body {
  -webkit-print-color-adjust: exact !important;
}
— ドロレックス
ソース
7
これで、行の色を変えてテーブルを印刷するときの問題が解決したようです。
— ビクターJ.ガルシア
Chromeの印刷ダイアログでは最初の試行で画像が読み込まれないため、画像パスに正しい大文字小文字を使用していることを確認してください。これは、background-imageプロパティのURLが物理フォルダー名の大文字と小文字が一致しない場合にのみ発生します。（バージョン48.0.2564.109 mで報告）
— MPaul 2016
3
FirefoxとIEの代替案は何ですか
— Shan Khan
5
将来の時間旅行者のためのメモ：color-adjust代わりに使用したい場合があります。
— КонстантинВан
@КонстантинВан2019年4月現在、Chromeではサポートされていません。これはFirefoxのドキュメントです。
— トーマス
82

とった：

CSS： 

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

テーブルセルを含むすべてのボックスで機能します!!!

  • （PDFプリンターの出力ファイルを信じる場合..？）
  • UbuntuのChrome + Firefoxでのみテスト...
— T4NK3R
ソース
5
IE8とIE9のサポートを追加でき-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */ ます。スプライト画像を表示したい場合は、img / clipテクニックcss-tricks.com/css-sprites-with-inline-imagesを使用します。これにより、IE9とFF（ IE8ではありませんが）
— emik 2013
2
@evamiからの提案があっても、通常のブラウザではうまく機能しますが、IEではうまく機能しません。
— 2013年
@woz IE8 / 9のプロジェクトで機能しています。グラデーション（ちょうどボックスシャドウのような）は、ブラウザの強制リセットによって削除されない余分な背景要素を追加します。あなたのCSSを共有してもよろしいですか？
— emik 2013年
2
これは最新のChrome（60）では動作しないようです。
— swervo 2017
1
これはChromeでは失敗します。私は69を使用しています。これは、（@ swervoのコメントに従って）少なくとも 60年以降壊れていることを示しています。
— iconoclast
34

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

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>
— マックス
ソース
22

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

これはChromeでプレビューを印刷して後、私は追加!importantごとにbackground-color及びcolor各タグにattrubute

クロムの印刷プレビュー

これは、追加する前にクロムでプレビューを印刷しています!important

ここに画像の説明を入力してください

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

— Basheer AL-MOMANI
ソース
おそらく、背景色をリセットする@printスタイルシートが既にあるからです。
— Niccolo M.
ああ、神様！それは機能していますが、これはどのように機能していますか？説明していただけますか？
— rahim.nagori
1
これが今のところ私にとって有効な唯一の解決策です。<div style = "-webkit-print-color-adjust：exact！important; background-color：red！important;"> ... </ div>
— Thomas
10

機能する2つのソリューション（最新のChromeでは少なくとも-まだテストされていません）：

  1. ！通常のcss宣言の重要な権利が機能します（@mediaの印刷物でも）
  2. svgを使用する
— ヤー1
ソース
6
重要なのは、「背景の色と画像を印刷する」が有効になっている限り、すべての最新のブラウザの問題を解決することです。
— Chris Hynes 2013年
2
！importantをbody {-webkit-print-color-adjust：exact;と一緒に使用すると、ユーザーの介入なしでも機能します。}（上記のコメントに従って）
— yar1 2013
2
私が使用するcolor-adjust場合、またはwebkitバリアントを使用する場合、実際には重要なルールは必要ないことがわかりました。
— カサポ2017年
7

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

例：

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
— ナッツとビール
ソース
6

他の投稿で述べられているボーダーの印刷オプションを有効にせずにできる別のトリックがあります。境界線が印刷されるので、このハックで無地の背景色をシミュレートできます：

.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;or 以外の要素では機能しないことに注意してください。display: table-cell;たとえば<table class="your-background">、<tr class="your-background">は機能しません。

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

— カーネル
ソース
1
これはマッドハックですが、印刷設定に関係なく、少なくとも何らかの形で背景色を強制します。素晴らしい、ありがとう。
— Brad Zacher
6

クロムについては、私はこのようなものを使用し、それが私のために働いた。

bodyタグ内で、

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

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

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
— アーミル・シェイク
ソース
5

かかわらず!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.cssとWHAMから行を削除しました！印刷可能な背景の色！
— Mighty Ferengi
1
ありがとうございました！最後に、これは私を立ち上げて実行した答えですが、追加する必要がありました：body {-webkit-print-color-adjust：exact！important; }
— オーシャンエアドロップ2019
3

この問題が見つかりました。GoogleApps ScriptでHTML出力からPDFを生成しようとすると、背景色も「印刷」されないため、同様の問題が発生しました。

-webkit-print-color-adjust:exact;そして!important当然のソリューションは、動作しませんでしたが、box-shadow: inset 0 0 0 1000px gold;やった...偉大なハック、どうもありがとうございました:)

— ロゴル
ソース
2

最近の印刷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

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

私が見つけた最高の「解決策」は、バックグラウンドを有効にするためにプリンタ設定を（ABC 123の箇条書きで）調整する必要があることを大胆に、簡潔に、簡潔に説明する小さなダイアログボックスをポップアップする目立つ「印刷」ボタンまたはリンクを提供することです。そしてイメージの印刷。これは私にとって非常に成功しています。

— アラノ
ソース
1

場合によっては（コンテンツがなく、背景のあるブロック）、境界線を使用して、ブロックごとに個別に上書きできます。

例えば：

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

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}
— ゲデオン
ソース
0

背景色の代わりに画像（またはおそらく背景色の画像）を使用してもかまわない場合は、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;
    }

}

— ksealey
ソース
私はあなたのアプローチを取り、IE11で動作させるように試みましたが、残念ながら動作しませんでした。それは!important私がクラスの各属性に値を設定してそれを機能させるまででした。
— Sal Alturaigi 2017
0 
tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

ChromeとEdgeで動作します

— ヴァシリー・イワノフ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.