Div背景图像打印空白

Div Background Image Print Blank

本文关键字：空白 打印 图像 背景 Div      更新时间：2023-10-14

我有下面的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页面，使其行为方式相同，并且仍然可以打印？我的最终目标是以适合页面的方式打印图像。

附言：我试着把我的代码放在小提琴里，但没有显示出来。

附言：我的墨盒已满：）

编辑：

您需要有另一个CSS样式表，并将媒体选项设置为打印：

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

这基本上是你其他样式表的副本，但在上面的代码中，它被称为print.css

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

这应该可以，但它不会起作用，如果我能得到一个作品给你看，我会更新的。让我知道它是否有效！

Fiddle

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

html { 
  background: url("https://i.ytimg.com/vi/rfbMN3-IFiA/maxresdefault.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我设法做到了这一点：

<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>

还有小提琴。

相关文章：