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

可以说我在我要打印的网页上有一个标题横幅。而不是浪费某人的墨水打印图像的整个块，有没有办法通过CSS来取代H1大小的文字图像？通过CSS将图像更改为文本以进行打印？

2008-12-30 Bryan Denny

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

2008-12-30 22:25:55

布赖恩，典型的标志物我反正使用图像替换的图形，所以徽标本身是真的在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"分别调用这个样式表。

来源

2008-12-30 22:27:00

我通常只是添加以下到我的样式表：

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

来源

2008-12-30 22:44:42

添加到Adam的解决方案：如果您的文本是固定的（“head banner was there”而不是“ad for this and such was there”），则可以使用:before or :after pseudo-elements插入文本，而不是将文本预先插入HTML中。

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

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

来源

2008-12-31 01:05:34

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

回答

相关问题