web-dev-qa-db-ja.com

cssを使用して背景画像を印刷する方法は？

ASP Net Spritesパッケージ を使用して、WebサイトにCSSスプライトを作成しています。

動作していますが、生成された画像は印刷時に表示されません。

HTMLレベルで生成されるコードは次のとおりです。

<a href="/" id="siteLogo"><img class="getmecooking-logo-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></a>

ユーザーがページを印刷するときにロゴ画像を表示するにはどうすればよいですか？

私はこれをprint.cssスタイルシートに追加しようとしましたが、うまくいきませんでした：

#siteLogo
{
    visibility: visible;
}

Print.cssは正常に機能しており、ページ上の他の要素に対して必要に応じてページをフォーマットしています。私の唯一の問題は、印刷時にサイトのロゴ画像を表示できないことです。

htmlcssprintingimage
27
Techboy

背景画像を印刷するかどうかは、ユーザーとブラウザの設定次第です。それに依存しないようにするには、実際の<img />タグ。

27
Kon

ChromeとSafariの場合、CSSに以下を追加できます。

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

他のWebブラウザでは、残念ながら、背景画像を印刷するオプションを手動で選択するのはユーザー次第です（例IE 9、10および11のユーザーは、歯車アイコン->印刷をクリックする必要があります->ページ設定、オプションを有効化）

99
Johann

印刷用に独自のメディアクエリを作成し、属性 "content"で：beforeセレクターを使用できます。

これをメディアクエリに含めると、印刷しようとするときに画像が挿入されます。

p:before { content: url(images/quote.gif); }

http://www.htmldog.com/reference/cssproperties/content/

41
Charlie

Googleで機能していますChrome！important属性を背景画像に追加するとき。最初に属性を追加してからもう一度試してください。次のようにできます。

.class-name {
background: url('your-image.png') !important;
}

また、これらの便利な印刷ルールを使用して、cssファイルの最後に配置することもできます。

@media print {
* {
    -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
    color-adjust: exact !important;  /*Firefox*/
  }
}
3
Hady El-Hady

メインドキュメントは、2つのスタイルシートをインポートします。1つは画面用で、もう1つはプリンター用です。必要に応じてメディア設定を微調整できます。

<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>

これは、ブラウザで使用されるメインのcssファイルで呼び出される背景画像です。

.bg {
background: url("http://fpoimg.com/250x250") top left no-repeat;
width:250px;
height: 250px;
}

そして、ユーザーが印刷ダイアログを開始するときにブラウザーが使用する印刷ハック。したがって、divに印刷クラスを追加して印刷するか、必要に応じて削除することができます。

.bg.print {
display: list-item;
list-style-image: url("http://fpoimg.com/250x250");
list-style-position: inside;
}

注：追加のhttpリクエストを行わないようにする場合は、ファイルをインポートする代わりに@mediaルールを使用することもできます。

参照元： http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html

3
Dexter

これを試して：

@media print {
    body:before {
        content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg);
        position: absolute;
        z-index: -1;
      }
}
1
ashkufaraz

Internet Explorerを使用する場合、次のようにします。

  • [ツール]メニューに移動します。
  • 「インターネットオプション」をクリックします。
  • 「詳細」タブをクリックします。
  • 印刷の背景色と画像にチェックを入れます。
0
kriti
<div style="position: relative;">
    <img src="/images/blue.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello, world.
    </div>
</div>

これは投稿したCSSの意味を理解します。次のWebサイトも参照してください。 https://defuse.ca/force-print-background.htm

0
Nasim Bahar

setmedia = "print"

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

参照

0
diEcho