Question

我有以下html页面。

<html>
   <head>
   </head>
   <body style="margin: 10px">
       <div style='width: 100%; height: 100%; 
          background-image: url("https://i.ytimg.com/vi/rfbMN3-IFiA/maxresdefault.jpg");
          background-repeat: no-repeat; background-size:contain; background-position:center'>
       </div>
   </body>
</html>

我的问题是，当我打印页面时，它显示为空白。这是否意味着无法打印div背景。如果是这样，我怎样才能改变我的html页面以同样的方式行事并且仍然可以打印？我的最终目标是以适合页面的方式打印图像。

P.S。我试图将我的代码放在fiddle中，但它没有显示。

P.S。我的墨盒已满：）

Answer 1

编辑：

您需要另一个CSS样式表，并将media选项设置为print：

isPopupVisible

这实际上是您的其他样式表的副本，但在上面的代码中，它名为print.css

默认媒体是屏幕，因此我们通常不需要设置它。

应该这样做，但它不会在小提琴中起作用，如果我能找到你的工作，我会更新。让我知道它是否有效！

Fiddle

以下css适用于所有浏览器：

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Answer 2

我设法这样做了：

<html>
   <head>
    <title></title>
   </head>
   <body style="margin: 5px; text-align: center">
        <img style="max-height: 100%; max-width: 100%"
        src="https://i.ytimg.com/vi/rfbMN3-IFiA/maxresdefault.jpg" alt="" />
   </body>
</html>

fiddle。

Div背景图像打印空白

2 个答案: