Изменить изображение на текст с помощью CSS для печати?
Вопрос
Допустим, у меня есть заголовок баннера на веб-странице, который я собираюсь распечатать.Вместо того, чтобы тратить чьи-то чернила на печать всего блока изображения, есть ли способ с помощью 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, но она есть, если вы хотите ее использовать.