Question

我在HTML页面中使用了一个容器，在那里我使用了背景图像。我想在背景图像上放置一些文字，然后打印出来。但是当我使用时：

<A HREF="javascript:window.print()">Print</A>

我根本得不到背景图片。这是我的代码：

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head>
<body >
<div id="headerbg">
<h1><p>DATA</h1>
</div> 
<div id="container">
    <p id="address">
    adress is XYZ
    </p>
    <p id="ward">
    Ward is 7
    </p>
</div>
<A HREF="javascript:window.print()">Print</A>
 <div id="footer">
</div>
</body>
</html>

我使用的CSS是：

#headerbg {
    background:#E8E8E8;
    text-align:center;
     height: 80px;
    }

#headerbg p{
    margin: 0;
    position: absolute;
    top: 5%;
    left: 40%;
    margin-right: -50%;
    }
#container
{   background-image: url("notice.jpg");
    height:680px;
    width:1000px;
     background-repeat: no-repeat; 
     margin-top:10px;
     margin-left:390px;
    position:relative;
}

#address
{
    z-index:100;
    position:absolute;    
    color:black;
    font-size:19px;
    left:10px;
    top:225px;
}

如何将背景图像打印？请帮帮我！

Answer 1

添加媒体打印：

<link rel="stylesheet" href="" media="print"/>

或者，您可以在css中设置，如：

@media print {
body {
   content:'url(../imagez.png)';
  }
}

注意：某些IE无法使用它，您可以使用：

@import 'style.css' print;

Answer 2

如果您使用的是Windows 7，则当出现打印对话框时，选项More Settings下方会出现一个名为Color的选项。点击它，您会看到名为check box的{{1}}。勾选，你会看到背景图片。

此外，对于Chrome和Safari，您可以在CSS中添加以下内容：

Background Graphics

即使未在打印对话框中选择该选项，也会打印@media print { * {-webkit-print-color-adjust:exact;} }。不幸的是，对于其他网络浏览器，用户可以手动选择打印背景图像的选项（例如，对于使用IE 9,10和11的用户，他们必须点击cog图标 - ＆gt;打印 - ＆gt; Page设置，并激活选项）

背景图像未打印

2 个答案: