web-dev-qa-db-ja.com

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

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

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

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

cssprintingbackground-image
93
DisgruntledGoat

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

47
Marc B

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

192
Marco Bettiolo

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

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

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

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

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

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

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

これは、印刷ビューに表示するヘッダーイメージを取得できなかったときに機能しました。

72
ckpepper02

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

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

以下のコードは私にとってはうまく機能します（少なくとも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>
13
Tarik

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

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

#example2 {
    background-color: #123456 !important;
}
7
nuts-n-beer

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

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

これにより、ページの上部に画像がスリップします。私の限られたテストから、ChromeおよびIE9で動作します

-ハンズ

6
hanz

擬似要素を使用します。多くのブラウザは背景画像を無視しますが、コンテンツが画像に設定された擬似要素は技術的には背景画像ではありません。その後、背景画像を画像が存在するはずのおおよその位置に配置できます（ただし、元の画像ほど簡単または正確ではありません）。

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

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

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

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

4
Dtipson

googleで動作していますchromeあなたが！important属性を背景画像に追加するとき、最初に属性を追加してもう一度やり直してください、あなたはそのようにすることができます

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

}

1
Hady El-Hady

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

 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;
0
Victor Batista

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

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

0
ms609