CSSでブラウザに背景画像を印刷させるにはどうすればよいですか？

この質問は以前に尋ねられましたが、解決策は私の場合には適用されません。特定の背景画像がページに不可欠であるため、それらを確実に印刷したい。（CSSスプライトとして使用されている画像がいくつかあるため、ページ内の画像ではありません。）

同じ質問に対する別の解決策はlist-style-image、を使用することを提案しています。これは、アイコンごとに異なる画像がある場合にのみ機能し、CSSスプライトは使用できません。

アイコンをインラインで配置した別のページを作成する以外に、別の解決策はありますか？

ブラウザの印刷方法をほとんど制御できません。最大で推奨できますが、ブラウザの印刷設定に「背景画像を印刷しない」場合は、ページを書き直して背景画像を他のコンテンツの背後にあるフローティング「前景」画像に変換することなしにできることはありません。

ChromeとSafariでは、CSSスタイル-webkit-print-color-adjust: exact;を要素に追加して、背景色や画像を強制的に印刷できます

ブラウザーには、デフォルトで、背景色と画像を印刷するオプションがオフになっています。CSSにいくつかの行を追加して、これをバイパスできます。追加するだけです：

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}

CSSで背景画像を印刷する方法を見つけました。背景のレイアウトによって多少異なりますが、私のアプリケーションではうまくいくようです。

基本的に、@media printスタイルシートの最後にを追加し、本文の背景を少し変更します。

例、現在のCSSが次のようになっている場合：

body {
background:url(images/mybg.png) no-repeat;
}

スタイルシートの最後に、以下を追加します。

@media print {
body {
   content:url(images/mybg.png);
  }
}

これにより、画像が「前景」画像として本文に追加され、印刷可能になります。z-index適切にするには、CSSを追加する必要がある場合があります。しかし、繰り返しになりますが、ページのレイアウト方法次第です。

これは、印刷ビューに表示するヘッダー画像を取得できないときに機能しました。

以下のコードは私にはうまくいきます（少なくともChromeでは）。

マージンとページの向きのコントロールも追加しました（縦、横）。

<style type="text/css" media="print">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}
</style>

必ず！important属性を使用してください。これにより、印刷時にスタイルが保持される可能性が大幅に高まります。

#example1 {
    background:url(image.png) no-repeat !important;
}

#example2 {
    background-color: #123456 !important;
}

@ ckpepper02が言ったように、body content：urlオプションはうまく機能します。しかし、少し変更すれば、次のように：before疑似要素を使用してソートのヘッダー画像を追加するだけでよいことがわかりました。

@media print {
  body:before { content: url(img/printlogo.png);}
}

それはページの上部に画像を入れてしまいます、そして私の限られたテストから、それはChromeとIE9で動作します

-ハンツ

疑似要素を使用します。多くのブラウザは背景画像を無視しますが、コンテンツが画像に設定されている疑似要素は、技術的には背景画像ではありません。その後、背景画像を画像が表示されるはずの場所に大まかに配置できます（ただし、元の画像ほど簡単でも正確でもありません）。

1つの欠点は、これをChromeで機能させるには、この動作を印刷メディアクエリの外部で指定し、それを印刷メディアクエリブロックに表示する必要があることです。だから、このようなもの...

.image:before{
        visibility:hidden;
        position:absolute;
        content: url("your/image/path");
    }   

@media print {
.image{
   position:relative;
    }
    .image:before{
       visibility:visible;
       top:etc...
    }       
}

欠点は、通常のページの読み込み時に画像がダウンロードされることが多く、不要なサイズが追加されることです。元の可視画像にすでに使用しているのと同じ画像/パスを使用するだけで、これを回避できます。

重要な属性を背景画像に追加すると、Google Chromeで機能します。最初に属性を追加してから、もう一度試してください。そのようにすることができます。

    .inputbg {
background: url('inputbg.png') !important;  

}

固定色の境界線を使用できます。

 borderTop: solid 15px black;

グラデーションの背景には、次を使用できます。

    box-sizing: border-box;
    border-style: solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-image: linear-gradient(to right, red, blue) 100%;
    border-image-slice: 1;
    border-width: 18px;

https://gist.github.com/danomanion/6175687は、背景画像の代わりにカスタムの箇条書きを使用して、エレガントなソリューションを提案します。

   a.logo {
     display: list-item;
     list-style-image: url("../images/desired-background.png");
     list-style-position: inside;
   }

これを

@media print {
}

ブロックでは、背景画像としてレンダリングされた画面上の透明な白のロゴを、印刷用の透明な黒のロゴに置き換えることができます。

あなたはそのようないくつかのトリックを行うことができます：

<style>
    @page {
        size: 21cm 29.7cm;
        size: landscape
        /*margin: 30mm 45mm 30mm 45mm;*/

    }
    .whater{
        opacity: 0.05;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 9999;
    }
</style>

本文タグ内：

<img src="YOUR IMAGE URL" class="whater"/>