Question

可能重复：
How to get a background image to print using css?

我有一个具有图片背景的div

<html>
<head>    
</head>
<body>
<div style='background:url(name.png);width:100px; height:100px;'></div>
<input type='button' onclick='window.print()'>//button that print

 </body>

 </html>

当我在浏览器中查看它时它工作正常..但是我用div打印页面的那一刻它不会打印背景图片...但是会打印在

中声明的文本和图像

我怎么能修好这个???

Answer 1

您可以设置 StyleSheet media = print ，然后您可以尝试

@media print {
   div {font-size: 10pt; line-height: 120%; background: white;}
}

Answer 2

默认情况下，浏览器不会打印背景图像。通常情况下，图片会妨碍阅读文本。

所以，我们假设你有充分的理由。您的设计非常棒，需要打印或其他东西。也许您正在创建电子票证存根，文本覆盖模板图像。我们一起去吧。

要打败无法打印背景图像的默认操作，我根本就不会将我的图像作为背景。我会让它成为一个常规的html元素，并使用CSS和/或JavaScript在您的文本下分层图像。查看位置和z-index CSS属性。

你的旧问题已经消失，祝你可能产生的新问题好运。

如何用图片背景打印div？

2 个答案: