我试图为我们的应用程序制作一个可打印的样式表,但我在@media打印的背景颜色有问题。

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

其他一切工作,我可以修改边界和这样,但背景色不会通过打印。我知道,如果没有更多细节,你们可能无法回答我的问题。我只是好奇是否有人有这个问题,或类似的,以前。


当前回答

身体{ background - color: # E5FFE5; } .bg_print { border-bottom: 30px solid #FFCC33; } .orange_bg_print_content { margin-top: -25 px; 填充:0 10px; } < div class = " bg_print”> < / div > < div class = " orange_bg_print_content”> 我的内容与背景! < / div >

测试和工作在Chrome和Firefox和Edge…

其他回答

tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

工作在Chrome和边缘

* {
  -webkit-print-color-adjust: exact;
}

此外,启用>模拟CSS媒体从>检查>更多的工具>渲染。非常详细的步骤可以在这里找到。

如果你不介意使用图片而不是背景色(或者可能是带有你背景色的图片),下面的解决方案对我来说在FireFox、Chrome甚至IE中都有效,没有任何覆盖。将图像设置在页面的某个位置,并隐藏它,直到用户打印。

页面上带有背景图像的html

<img src="someImage.png" class="background-print-img">

Css

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}

如果用户在打印设置中关闭了“打印背景颜色和图像”,没有CSS会覆盖它,所以一定要考虑到这一点。这是默认设置。

一旦设置好,它就会打印背景颜色和图像,你所拥有的就可以工作了。

它在不同的地方被发现。 在IE9beta中,它可以在打印->页选项下的纸张选项中找到

在FireFox中,它在页面设置->[格式和选项]选项卡下的选项。

身体{ background - color: # E5FFE5; } .bg_print { border-bottom: 30px solid #FFCC33; } .orange_bg_print_content { margin-top: -25 px; 填充:0 10px; } < div class = " bg_print”> < / div > < div class = " orange_bg_print_content”> 我的内容与背景! < / div >

测试和工作在Chrome和Firefox和Edge…