表背景图像不显示在打印纸上 [英] table background image not display on printing paper

问题描述

template.html

  {％block css-custom％} 
< link rel =stylesheet type =text / cssmedia =printhref ={{STATIC_URL}} style / print.css/> 
< link rel =stylesheettype =text / cssmedia =screenhref ={{STATIC_URL}} style / print.css/> 
 {％endblock％} 
 
 {％block main-content％} 
''''''''''''''
< table width =100％border =0class =printimg> 
 
< tr>< td>一些数据< / td>< / tr>< / table> 
''''''''''''''''''
 {％endblock％} 
  

我想将上面的图像设置为表的背景。如果我在一个标签中设置相同的图像，它将显示，但作为背景，不会发生。作为html页它是工作，问题是在纸张打印。

打印预览时，背景图像即将显示，但在打印纸张图像消失。

编辑：

report.css

  .printimg {
 background：url（'/ static / images / human.png'）; 
 width：128px; 
 height：293px; 
 background-position：center;
} 
 
 / * media：screen * / 
 @media screen {
 .printimg img {
 visibility：hidden; 
} 
} 
 
 / * media：print * / 
 @media print {
 .printimg img {
 visibility：visible; 
} 
} 
  

解决方案

1.要在Chrome和Safari浏览器中启用后台打印功能，请添加

  -webkit-print-color-adjust：exact; 
  

在print.css文件中，其余都是相同

2.在FireFox默认情况下打印背景颜色和图像在打印设置中关闭，没有CSS将覆盖它。

在FF中打开背景的步骤：

 转到文件 - >页面设置 - >格式&选项 - >勾选打印背景（图片和颜色）
  

希望有帮助！

template.html

{% block css-custom %}
    <link rel="stylesheet"  type="text/css" media="print" href="{{ STATIC_URL }}style/print.css" />
    <link rel="stylesheet"  type="text/css" media="screen" href="{{ STATIC_URL }}style/print.css" />
{% endblock %}

{% block main-content %}
''''''''''''''
<table width="100%" border="0" class="printimg">

            <tr><td>some data</td></tr></table>
'''''''''''''''''
{% endblock %}

I want to set the above image as background for the table.If i set the same image in a tag in , it is coming for display, but as background it is not happening.As html page it is working,problem is with printing it in paper.

On print preview the background image is coming for display but on printing in paper the image gets disappeared.

edit:

report.css

.printimg {
           background:url('/static/images/human.png');
           width:128px;
           height:293px;
           background-position:center;"
          }

/* media:screen */
@media screen {
.printimg img{
    visibility: hidden;
}
}

/* media:print */
@media print {
.printimg img{
    visibility: visible;
}
}

I tried with this css,still the same problem is their.

解决方案

1.To enable background printing in Chrome and Safari web browsers add

-webkit-print-color-adjust:exact;

in your print.css file,rest all is same

2.In FireFox by default "Print Background colours and images" turned off in their print settings,no CSS will override that.

User should manually turn on if background image is required.

Steps for turn on background in FF:

Go to File -->Page setup -->Formats & Options -->Tick Print background(images & colors)

Hope this help!

这篇关于表背景图像不显示在打印纸上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！