1

テキストの横に小さなアイコンがあります。コードは次のようになります。

<div id="photo-info">
    <p class="textcenter"><img width="16" height="16" 
              src="/Images/Icons/info.png" />Photo Info:</p>
    <p class="textcenter"> Information text here.</p>
</div>

ページの背景は黒、アイコンは白です。しかし、ページを印刷すると、テキストは黒で背景が白になります。印刷すると白いアイコンは表示されませんが、これは大きな問題ではありませんが、プリンターのときにアイコンを表示したいと思います。印刷できる黒の別のアイコンがあります。印刷時にこれらを切り替えるにはどうすればよいですか?

注: 両方の画像を手動でページに挿入し、CSS を使用して画面と印刷用の正しいアイコンを表示および非表示にすることもできますが、自動化され、すべてのページに戻って編集する必要がない方法を探しています。その中のコード。

4

1 に答える 1

2

別の方法はbackground-image、画像に を設定することです。したがって、HTMLはそのようになります。

<img class="small-icon" width="16" height="16" />

そうすると、CSS は次のようになります。

.small-icon {
  background-image: url(path/to/image.png);
}

その後、スタイルシートごとに背景画像を適用できます。このようにして、デスクトップ スタイルシートで指定されたデスクトップ イメージと、印刷スタイルシートで指定された印刷イメージを取得します。

于 2012-06-08T02:07:26.640 に答える