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

StackOverflow https://stackoverflow.com/questions/401702

Вопрос

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

Это было полезно?

Решение

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

Другие советы

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

.nodisplay
{
    display: none;
}

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

И затем назначьте отсутствие печати класс для элементов, которые не должны быть напечатаны:

<div class="noprint">

</div>

И для вашего примера должно сработать что-то вроде следующего:

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

Брайан, обычно для таких вещей, как логотипы, я все равно использую замену изображения для графики, поэтому сам логотип действительно находится в теге 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".

Добавление к решению Адама:Если ваш текст исправлен ("там был главный баннер", а не "там была реклама для такого-то"), вы можете использовать :до или : после псевдоэлементов чтобы вставить текст вместо того, чтобы предварительно вставлять текст в HTML.

I упрощает ваш HTML-код, если вы заменяете много изображений одним и тем же текстом.

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top