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

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

css image text header printing

31.12.2008 01:23

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

6 623

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

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

31.12.2008 01:25

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

31.12.2008 01:27

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

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

31.12.2008 01:44

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

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

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

31.12.2008 04:05