通过 CSS 将图像更改为文本以进行打印？答案

【问题标题】：Change an image to text via CSS for printing?通过 CSS 将图像更改为文本以进行打印？
【发布时间】：2010-09-28 22:31:28
【问题描述】：

假设我在要打印的网页上有一个标题横幅。有没有办法通过 css 将图像替换为 H1 大小的文本，而不是浪费某人的墨水打印整个图像块？

【问题讨论】：

标签： css image text header printing

【解决方案1】：

添加到 Adam 的解决方案：如果您的文字是固定的（“有标题横幅”而不是“有某某的广告”），您可以使用 :before or :after pseudo-elements 插入文本，而不是预先插入文本的 HTML。

如果您用相同的文本替换许多图像，我会使您的 HTML 更轻。

我不得不说我不喜欢这个 CSS 功能，但如果你想使用它，它就在那里。

【讨论】：

【解决方案2】：

我通常只是将以下内容添加到我的样式表中：

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

【讨论】：

【解决方案3】：

Bryan，通常在徽标之类的东西上，无论如何我都会使用图像替换图形，因此徽标本身实际上是在 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" 单独调用此样式表。

【讨论】：

【解决方案4】：

您可以将 h1 元素和图像放在源中的同一位置，并将图像 CSS display:none 用于打印媒体，将 h1 设置为 display:none 用于屏幕媒体。

【讨论】：