5

印刷しようとしている Web ページにヘッダー バナーがあるとします。イメージのブロック全体を印刷する誰かのインクを無駄にする代わりに、css を介してイメージを H1 サイズのテキストに置き換える方法はありますか?

4

4 に答える 4

10

私は通常、スタイル シートに以下を追加するだけです。

.nodisplay
{
    display: none;
}

@media print {
    * {
        background-color: white !important;
        background-image: none !important;
    }
    .noprint
    {
        display: none;
    }
}

そして、印刷されるべきではない要素にnoprintクラスを割り当てます。

<div class="noprint">

</div>

そして、あなたの例では、次のようなものがうまくいくはずです:

<img src="logo.png" class="noprint" ...>
<h1 class="nodisplay">Text Logo</h1>
于 2008-12-30T22:44:42.447 に答える
7

h1ソース内の同じ場所に要素と画像を配置し、印刷メディア用の画像 CSSをdisplay:none使用し、スクリーン メディア用に をh1設定することができます。display:none

于 2008-12-30T22:25:55.510 に答える
5

Bryan、通常、ロゴのようなものでは、とにかくグラフィックの画像置換を使用するため、ロゴ自体は実際には H1 タグにあります。次に、私の印刷スタイルシートで。私はこのようなことをします...

h1#logo a, h1#home-logo{
    text-indent: 0 !important;
    background-image: none !important;
    font-size: 1.2em !important;
    display: block !important;
    height: 1em !important;
    width: 100% !important;
    text-decoration: none !important;
    color: black !important;
}

これにより、画像の置換が削除され、テキストが表示されます。もちろん、このスタイルシートを を使用して個別に呼び出すようにしてくださいmedia="print"。

于 2008-12-30T22:27:00.407 に答える
1

Adam のソリューションへの追加: テキストが修正されている場合 (「ヘッド バナーがあった」ではなく、「そのような広告がそこにあった」) 、:before または :after 疑似要素を使用して、テキストを事前に挿入する代わりにテキストを挿入できます。 HTML に挿入されます。

多くの画像を同じテキストに置き換える場合、HTML を軽量化します。

私はこの CSS 機能が嫌いだと言わざるを得ませんが、使用したい場合はそこにあります。

于 2008-12-31T01:05:34.173 に答える