0

#header私の Web サイトのヘッダーは、 div内の 2 つの画像 (1 つは左に、もう 1 つは右にフローティング) で構成されています。

すべてのブラウザーで美しくレンダリングされますが、ページを印刷しようとすると、画像は表示されますが、#headerdiv の背景色は表示されません。

これを修正するにはどうすればよいですか?

4

5 に答える 5

0

そのように使用できますmedia-query：

#header { width: 100%; height: 100px; }

@media screen
{ 
    #header > #left { background: url("display1.png"); }
    #header > #right { background: url("display2.png"); }
}

@media print
{ 
    #header > #left { background: url("print.png"); }
    #header > #right { display: none; }
}

次に、HTML に挿入します。

<div id="header">
    <div id="left"></div>
    <div id="right"></div>
</div>
于 2012-08-12T15:24:19.577 に答える
0

ブラウザーは経済的になりました。デフォルトでは、背景色を印刷しなくなりました。

FireFox などの一部のブラウザではそれを管理できますが、それはユーザーごとの設定です。

于 2012-08-12T15:25:13.913 に答える
0

使用できますmedia="print"：

<style type="text/css">
#img{background-image:url('img1.jpg');}
</style>
<style type="text/css" media="print">
#img{background-image:url('img2.jpg');}
</style>

しかし、問題がブラウザが背景色を印刷しないことであり、Firefox を使用している場合は、次のことができます。

[ファイル] > [ページ設定...] > [書式とオプション] > [オプション] > [印刷の背景 (色と画像)]

また

Firefox ボタン > 印刷... > ページ設定... > 書式とオプション > オプション > 背景を印刷 (色と画像)

于 2012-08-12T15:25:21.730 に答える
0

実際、シンシア、あなたがこのようなことをするつもりなら、最も理にかなっているのはprint-header.gif、両方の画像のソースとして画像を使用することだと思います.

このメソッドは CSSスプライトと呼ばれます。CSS ポジショニングを使用して、画面に必要な画像の部分のみを表示.header-leftし.header-rightます。印刷の場合、展開.header-leftして画像全体を表示し、header-right を非表示にすることができます。これは<img>、ページ上で 1 つ少なくなり、HTTP リクエストを削減していることを意味します (画像に対して 1 つ対 3 つ)。

通常、このメソッドは背景画像でのみ使用されます (ステップ 1 に戻ります!) が、clipプロパティを使用して前景画像で使用できます。CSS は次のようになります。

screen.css:

div#header {
    position: relative;
}

img.header-left {
    position: absolute;
    clip:rect(top, right, bottom, left);
}

img.header-right {
    position: absolute;
    clip:rect(top, right, bottom, left);
    top: offset;
    left: offset;
}

印刷.css:

img.header-left {
    position: static;
    clip: auto;
}

img.header-right {
    display: none;
}

HTMLは次のようになります

<div id="header">
   <img src="/images/print-header.gif" class="header-left" />
   <img src="/images/print-header.gif" class="header-right" />
</div>
于 2012-08-12T16:11:11.773 に答える
0

解決策を見つけました！

2 つの元の画像を組み合わせた 2 番目のヘッダー画像 (見栄えを良くするために少しパディングを追加) を作成し、印刷専用に使用しました。

印刷用に画像を表示する方法を次に示しますが、それ以外の場合は表示されません。

というクラスを作成.print-headerし、メインの style.css で次のように設定しました。

.print-header { display:none }

私のprint.cssでは、次のように設定しました：

.print-header { display:block !important }
.header-left { display:none } /* this hides the original left header image when printing */
.header-right { display:none } /* this hides the original right header image when printing */

そして、HTMLを次のように変更しました：

<div id="header">
   <img src="/images/logo.gif" class="header-left" />
   <img src="/images/cta.gif" class="header-right" />
   <img src="/images/print-header.gif" class="print-header" />
</div>

そして出来上がり！ブラウザーでは元の 2 つの画像のヘッダーが表示され、印刷時には単一の画像のヘッダーが表示されます。

于 2012-08-12T15:26:21.773 に答える