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

我通常只在样式表中添加以下内容:

.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 元素和图像在源代码中的同一位置,并具有图像CSS display:none h1 着手 对于屏幕媒体。

Bryan,通常在logo之类的东西上,我会用图像替换图形,所以logo本身实际上是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" .

添加到Adam的解决方案中:如果您的文本是固定的(“head banner was there”not“广告中的某物和某物存在”),您可以使用 :before or :after pseudo-elements

如果要用相同的文本替换许多图像,我会使HTML变得更轻。