通过CSS将图像更改为文本进行打印?
题
假设我在要打印的网页上有一个标题横幅。而不是浪费某人的墨水打印整个图像块,有没有办法通过CSS用H1大小的文本替换图像?
解决方案
您可以将 h1
元素和图像放在源中的相同位置,并为打印介质提供图像CSS display:none
,并具有<代码> h1 设置为 display:none
用于屏幕媒体。
其他提示
我通常只是在样式表中添加以下内容:
.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>
布莱恩,通常在徽标之类的东西上我无论如何使用图像替换图形,因此徽标本身实际上是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 =&quot; print&quot;
分别调用此样式表。
添加到Adam的解决方案:如果你的文字是固定的(“头横幅就在那里”而不是“广告”等等,那么你可以使用:before或:after伪元素以插入文本而不是在HTML中预先插入文本。
如果要使用相同的文本替换许多图像,我会使您的HTML更轻松。
我不得不说我不喜欢这个CSS功能,但如果您想使用它,它就在那里。
不隶属于 StackOverflow