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设置为{{ 1}}用于屏幕媒体。

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

添加到Adam的解决方案：如果你的文字是固定的（“头横幅就在那里”而不是“这样的广告，那就是那里”），你可以使用:before or :after pseudo-elements插入文字而不是文字预先插入HTML。

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

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

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

4 个答案: