当前位置:  开发笔记 > 前端 > 正文

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

如何解决《通过CSS将图像更改为文本进行打印?》经验,为你挑选了3个好方法。

假设我在要打印的网页上有一个标题横幅.而不是浪费某人的墨水打印整个图像块,有没有办法通过CSS用H1大小的文本替换图像?



1> Gordon Bell..:

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

.nodisplay
{
    display: none;
}

@media print {
    * {
        background-color: white !important;
        background-image: none !important;
    }
    .noprint
    {
        display: none;
    }
}

然后将noprint类分配给不应打印的元素:

对于您的示例,以下内容应该起作用:


Text Logo



2> Adam Bellair..:

您可以将h1元素和图像放在源中的相同位置,并将图像CSS display:none用于打印介质,并将其h1设置为display:none用于屏幕媒体.



3> Tim Knight..:

布莱恩,通常在像徽标这样的东西我使用图像替换图形无论如何,因此徽标本身实际上是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".

推荐阅读
手机用户2402851155
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有