Изменить изображение на текст через CSS для печати?

Question

Допустим, у меня есть заголовок баннера на веб-странице, которую я собираюсь напечатать. Вместо того, чтобы тратить чернила на печать всего блока изображения, есть ли способ через css заменить изображение текстом размера H1?

Answer 1

Обычно я просто добавляю в свою таблицу стилей следующее:

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

Вы можете поместить элемент h1 и изображение в одно и то же место в источнике, а также иметь изображение CSS display:none для печатных материалов и установить h1 на display:none для экранных носителей.

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="print".

Answer 4

Добавление к решению Адама: если ваш текст исправлен («заголовок баннера был там», а не «реклама для того или другого там была»), вы можете использовать : before или: after псевдоэлементы , чтобы вставьте текст вместо того, чтобы предварительно вставить текст в HTML.

Я делаю ваш HTML легче, если вы заменяете много изображений одним и тем же текстом.

Я должен сказать, что мне не нравится эта функция CSS, но она есть, если вы хотите ее использовать.