如何打印带有图片背景的div？ [复制]答案

【问题标题】：how to print div with picture background? [duplicate]如何打印带有图片背景的div？ [复制]
【发布时间】：2012-02-22 07:12:56
【问题描述】：

可能重复：
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 打印页面时它不会打印背景图片...但是会打印在

中声明的文本和图像

我该如何解决这个问题？？？

【问题讨论】：

你应该添加print css: stackoverflow.com/questions/596876/…
你也应该先做your own research。

标签： javascript html css

【解决方案1】：

你可以设置 StyleSheet media = print 然后你可以试试

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

【讨论】：

【解决方案2】：

浏览器默认不打印背景图片。图片往往会妨碍阅读文本。

因此，我们假设您有充分的理由。你的设计太棒了，需要打印什么的。也许您正在创建电子客票存根，并且文本覆盖了模板图像。让我们一起去吧。

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

你的老问题已经解决了，祝你好运解决这可能带来的新问题。

【讨论】：