印刷用にCSS経由で画像をテキストに変更しますか？

Question

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

Answer 1

h1 要素と画像をソースの同じ場所に配置し、印刷メディア用に画像CSS display：none を配置し、< code> h1 はスクリーンメディアに対して display：none に設定されています。

Answer 2

通常、次のコードをスタイルシートに追加するだけです。

.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>

Answer 3

ブライアン、通常はロゴのようなものについては、とにかくグラフィックの代わりに画像を使用しているので、ロゴ自体は本当に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 =＆quot; print＆quot; を使用してこのスタイルシートを個別に呼び出すようにしてください。

Answer 4

Adamのソリューションへの追加：テキストが修正されている場合（「ヘッドバナーがありました」「＆adなどがありませんでした」）、：beforeまたは：after擬似要素を使用して、HTMLにテキストを事前に挿入する代わりにテキストを挿入します。

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

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