【问题标题】:table background image not display on printing paper表格背景图像不显示在打印纸上
【发布时间】:2013-08-01 03:46:59
【问题描述】:

模板.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 %}

我想将上面的图像设置为表格的背景。如果我在标签中设置相同的图像,它将显示,但作为背景它没有发生。作为 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;
}
}

我用这个 css 试过了,他们的问题还是一样。

【问题讨论】:

  • 我在编辑中尝试了上面的代码,仍然是同样的问题。请问我做错了什么。
  • 您需要使用媒体查询。 @media print { .printimg img { 可见性:可见; } }

标签: html css django image printing


【解决方案1】:

1.在 Chrome 和 Safari 网络浏览器中启用后台打印添加

-webkit-print-color-adjust:exact;

在你的 print.css 文件中,其余的都是一样的

2.在FireFox中默认"Print Background colours and images"在他们的打印设置中关闭,no CSS will override that.

如果需要背景图片,用户应手动开启。

FF开启背景步骤:

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

希望对您有所帮助!

【讨论】:

    【解决方案2】:

    这是一个浏览器设置,与 Django 无关。看到这个帖子How to forcefully print background image in HTML?

    【讨论】:

    • 我在编辑中尝试了上面的代码,仍然是同样的问题。请问我做错了什么
    • 在示例链接中,div 中有一个图像,当页面显示在屏幕上时它会被隐藏。一旦打印 CSS 中的背景元素被隐藏并且 设置为 display: inline.
    • 我正在使用表格,css 类应用于该表格,表格背景图像未打印在纸上,我是否需要在 css 中包含与打印相关的任何其他样式。请参考我更新的问题。跨度>
    • OK 进一步解释...由于浏览器设置,您无法打印表格的背景图像。您可以通过隐藏表格的背景图像并将背景图像显示为表格中的内联图像来伪造它。该示例显示了如何做到这一点。在屏幕上显示 div 的背景图像。打印时背景图像被隐藏,但它显示为内联图像。这样内联图像将被打印出来。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-03-03
    • 2017-08-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-03-20
    • 2012-02-15
    相关资源
    最近更新 更多