28

画像またはその他の印刷可能な色の上に表示されるテキストがあるとします。印刷時にこのテキストを強制的に白くすることはできますか? デフォルトの動作は、ほとんどのブラウザーで白を黒または灰色に強制することです。これは、背景色/画像が削除されたコンテナー内のテキストを印刷する場合には明らかに意味がありますが、画像にテキストを重ねる場合にテキストを強制するのは意味がありません。

私はおそらく印刷スタイルシートをよく知っていることに言及する必要があります.IE/chrome/firefoxでは、フォントの色を設定しても、フォントが白く表示されないことがあります。ブラウザによっては黒かグレーになります。実際に可能だと思われる場合は、画像の上に白いテキストの例を示してください.

説明するには、次を参照してください。

http://jsfiddle.net/NSwYE/

個人的には、印刷の仕組み上、それは不可能だと思います。とてつもなく面倒くさいです。

4

9 に答える 9

31

これは、Web ページの作成者が完全に制御できるわけではありません。

たとえば、このフィドルは、3 つの黒い背景のいずれかに白いテキストを印刷します (少なくとも、Dell 1720 レーザー プリンターで印刷しました)。

IE9

ユーザーが横にあるボックスをチェックした場合:

ツール -> 印刷 -> ページ設定 -> 「背景の色とイメージを印刷する」

そのボックスがチェックされていない場合、最初の 2 つは黒で印刷されませんが、最後の 2 つでは印刷されますが (タグであるためimg)、タグの上であってもテキストが灰色で印刷されますimg。したがって、「背景の色と画像を印刷する」の設定は、ブラウザがテキストを解釈する方法に影響し、チェックされている場合は真の白 (ノックアウト効果) が許可されますが、チェックされていない場合は許可されないようです。

ファイアフォックス

ここにあるチェックボックス（動作しているようです）：

ファイル -> ページ設定 -> 「印刷背景 (色と画像)」

クロムの？Web ページの作成者が制御?

この投稿の情報でうまくいくかどうかはまだ確認していません (次の fiddleではうまくいきませんが、iframe にあるためかもしれません)。Chrome で印刷する必要がある要素については、次の設定を試してください。

-webkit-print-color-adjust: exact;
于 2012-05-23T19:43:12.920 に答える
10

print.cssエリック・メイヤーがそれについて投稿しています。

たとえば、彼の cssでこのスタイルを使用するhtml5boilerplate :

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

アップデート：

あなたの例のhtmlで：

<img src="http://www.clipart.dk.co.uk/DKImages/Halloween/image_halloween002.jpg" alt="black cat">
<div id="sometext">Cat</div>

そして私のCSS：

#sometext {
    position: absolute;
    top: 125px;
    left: 220px;
    color: #FFF; 
}

@media only print {

#sometext {
    color: #FFF !important;
    /* actually trick with white text-shadow not work ( */
    text-shadow: 0 0 3px #FFF !important;
}

}

私はこのデモを手に入れました。これは許容できる解決策ですか?

ここに画像の説明を入力 </p>

于 2012-05-21T11:32:57.793 に答える
3

http://jsfiddle.net/NSwYE/の例では、猫の上に白いテキストが表示されます。しかし、私は Firefox 3.6 と Brother レーザー プリンターを使用しています。

プリンタの動作は、プリンタ ドライバとアプリケーションに完全に依存しています。私のプリンターは、Firefox を使用して例を正しく印刷します。Microsoft Publisher からグレースケールのテキストを正しく印刷します。Microsoft Word ではグレースケールのテキストは印刷されません。テキストは常に黒です。

于 2012-05-23T19:57:19.217 に答える
0

少しやり過ぎかもしれませんが、これが繰り返し必要な場合は、キャンバスまたは SVG を使用してコンテンツを生成することを検討してください (Raphael.js は IE サポートを提供します)。キャンバスと SVG/VML 要素の両方が、主要なブラウザーで正確な色で印刷されます。

于 2014-11-14T21:34:03.567 に答える
0

おそらく、そのようにスタイルを設定する印刷固有のスタイルシートを使用する場合。

例えば

<link href="print.css" rel="stylesheet" media="print" />
于 2012-05-21T11:32:03.040 に答える