35

私はいくつかの簡単なCSSを持っています：

#someElement {
    background-color:black;
    color:white;
}

ブラウザでは問題ないように見えますが、Firefoxで印刷すると、白い背景に黒いテキストとして表示されます。これはある種のインク節約機能だと思いますが、それを回避する方法はありますか？

4

8 に答える 8

45

そのブラウザ設定。CSSでできることは何もありません。Windowsの場合- File > Page Setup... > Print Background。

于 2009-04-19T00:06:32.707 に答える
30

少しハックですが、CSS 疑似要素を使用すると、太い境界線を使用して背景を作成できます。「背景の印刷」がオフの場合でも境界線は印刷されます。本当に太くしてください。1 つの注意点として、Firefox はすべての白いフォントの色を黒に設定するため、偽の黒の背景を作成すると、Firefox は依然としてテキストを黒くし、テキストを非表示にします。とにかくここにあります：

HTML:

<div class="redBox">
  <div class="content">Black on red</div>
</div>

CSS:

.redBox {
  /* o no, does not work with print */
  background-color: red;
}

@media print {
  .redBox {
     position: relative;
     overflow: hidden; /* this might not work well in all situations */
  }
  .redBox:before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     /* and here it is, the background color */
     border: 99999px red solid;
     z-index: 0; /* was required in my situation */
  }
  .redBox * {
    /* was required in my situation */
    position: relative;
    z-index: 1;
  }
}
于 2014-03-25T10:59:46.783 に答える
24

これには簡単な解決策があります。

の場合background-color、次を使用する代わりに:

background-color: red

使用する：

background-color: unset;
box-shadow: inset 0 0 0 1000px red /* 1000px is a random high 
                                     number that is definitely 
                                     larger than the box dimension*/

またcolor、代わりに:

color: grey;

使用する：

color: unset;
text-shadow: 0 0 grey;

を使用して印刷のみに制限することもでき@media printますが、その必要はありません。

注: orが親要素から継承されている場合は、background-color: transparent;orを使用する必要がある場合があります。color: transparent;colorbackground-color

于 2015-12-20T09:43:07.547 に答える
-1

探している答えではないかもしれませんが、次のようになります。

ページを印刷するための別のスタイルシートを追加したいと思います。通常、ナビゲーション メニュー、ブレッドクラム、広告などを削除し、画面上のスタイルシートと比較して、余白、パディング、境界線、およびフォントに小さな変更を加えます。

ユーザーにページ全体を黒のインクで白のテキストで塗りつぶすことを強制することを考えても、私にはばかげているように思えます。

別の印刷スタイルシートを追加するには、ページの先頭に別のスタイルシートを追加します。

<link rel="stylesheet" href="print.css" type="text/css" media="print">
于 2009-04-19T01:23:11.757 に答える