为什么赢得base64解码后的背景​​图像正确打印？

时间：2014-03-12 10:42:15

标签： html css printing

考虑以下html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Document</title>
        <style type="text/css">
            .csBCCE90CF {background-image:url(data:image/png;base64,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);background-repeat:no-repeat;}
        </style>
    </head>
    <body leftMargin=10 topMargin=10 rightMargin=10 bottomMargin=10 style="background-color:#FFFFFF">

        <div class="csBCCE90CF" style="width:193px;height:52px;">
        </div>          

    </body>
</html>

或JSFiddle：http://jsfiddle.net/hdPx3/

当我从网络浏览器（即firefox，chrome）打印时，结果页面为空。

1 个答案:

答案 0 :(得分：2)

这是因为默认情况下浏览器不打印背景。 我建议使用图片代码而不是div，如下所示：

<img src="data:image/png;base64,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">
相关问题
最新问题