Ändern Sie ein Bild über CSS, um Text für den Druck?

Question

Hier kann sagen, dass ich ein Header-Banner auf einer Website habe ich bin zu drucken. Statt jemandem Tinte zu verschwenden, den gesamten Block des Bildes gedruckt wird, ist es eine Möglichkeit, über CSS das Bild mit Text von H1 Größe zu ersetzen?

Answer 1

Sie könnten ein h1 Element und ein Bild an der gleichen Stelle in der Quelle setzen, und haben das Bild CSS display:none für Printmedien und haben die h1 Set für Bildschirmmedien display:none.

Answer 2

Ich füge normalerweise nur folgendes Stylesheet:

.nodisplay
{
    display: none;
}

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

Und dann weisen Sie die noprint Klasse Elemente, die sollte nicht gedruckt:

<div class="noprint">

</div>

Und für Ihr Beispiel, so etwas wie die folgenden funktionieren soll:

<img src="logo.png" class="noprint" ...>
<h1 class="nodisplay">Text Logo</h1>

Answer 3

Bryan, in der Regel auf Dinge wie Logos verwenden I Bild Ersatz für die Grafik ohnehin so das Logo selbst wirklich in einem H1-Tag ist. Da ist in meinem Druck-Stylesheet. Ich mache so etwas wie dieses ...

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;
}

, die das Bild Ersatz und zeigt den Text entfernt. Stellen Sie sicher, natürlich, dass Sie diese Sheet rufen separat media="print" verwendet wird.

Answer 4

Zusätzlich zu Adams Lösung: Wenn der Text festgelegt ist ( „head-Banner war es“ nicht „ad für so und so war es“), können Sie : vor oder: nach dem pseudo-Elemente Text einzufügen statt dessen Text aufweist, in dem HTML vorge eingefügt.

Ich mache Ihren HTML leichter, wenn Sie viele Bilder mit dem gleichen Text ersetzen.

Ich muss sagen, dass ich diese CSS-Funktion nicht mögen, aber es ist da, wenn Sie es verwenden möchten.