CSS@media打印问题，背景色；_Css_Media Queries

CSS@media打印问题，背景色；

css

CSS@media打印问题，背景色；,css,media-queries,Css,Media Queries,我是这家公司的新员工，我们有一款使用了大量css的产品。我正在尝试为我们的应用程序制作一个可打印的样式表，但是我在@media print中遇到了背景色的问题 @媒体打印{ #标题{显示：无；} #adwrapper{display:none；} 运输署{ 边框底部：实心；右边界：实心；背景色：#C0； } } 其他一切都正常，我可以修改边框，但是背景色不会在打印中显示出来。现在我明白了，如果没有更多的细节，你们可能无法回答我的问题。我只是好奇以前是否有人有过这个问题，或者类似的问题如果

我是这家公司的新员工，我们有一款使用了大量css的产品。我正在尝试为我们的应用程序制作一个可打印的样式表，但是我在

@media print

中遇到了

背景色的问题
@媒体打印{
#标题{显示：无；}
#adwrapper{display:none；}
运输署{
边框底部：实心；
右边界：实心；
背景色：#C0；
}
}

其他一切都正常，我可以修改边框，但是背景色
不会在打印中显示出来。现在我明白了，如果没有更多的细节，你们可能无法回答我的问题。我只是好奇以前是否有人有过这个问题，或者类似的问题
 如果用户在其打印设置中关闭了“打印背景颜色和图像”，则没有CSS会覆盖该设置，因此请始终对此进行说明这是默认设置
一旦设置好，它将打印背景颜色和图像，你在那里所拥有的将起作用
它在不同的地方被发现。
在IE9beta中，可以在纸张选项下的打印->页面选项中找到它
在FireFox中，它位于页面设置->选项下的[Format&Options]选项卡中。
我找到的最佳“解决方案”是提供一个突出的“Print”按钮或链接，弹出一个小对话框，以粗体、简要和简洁的方式解释他们需要调整打印机设置（带有ABC 123项目符号说明）启用背景和图像打印。这对我来说非常成功。
要在Chrome中启用背景打印：
正文{
-webkit打印颜色调整：精确！重要；
}
明白了：
CSS:
适用于所有盒子-包括表格单元格

（如果PDF打印机输出文件可信……）
仅在Ubuntu上的Chrome+Firefox中测试
试试这个，它在谷歌Chrome上对我有用：
<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>


.第页{
背景色：白色！重要；
}
在某些情况下（没有任何内容的块，但有背景），可以使用边框对每个块分别进行覆盖
例如：
.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

<div class="foo">
 <p class="red">Some text</p>
</div>

有两种解决方案（至少在现代Chrome上——还没有测试过）：
!！常规css声明工作中的重要权利（甚至在@media print中）
使用svg
您可以使用标签canvas
和“绘制”背景，这在IE9、Gecko和Webkit上都可以使用。
您还可以使用另一个技巧，而无需激活其他帖子中提到的打印边框选项。由于边框是打印的，因此您可以使用以下技巧模拟纯色背景：
.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}

通过将类添加到元素来激活它：
<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>



虽然这需要一些额外的代码和一些额外的注意，使背景颜色可见，但它仍然是我所知的唯一解决方案
请注意，除了display:block之外，这种破解方法不适用于其他元素或显示：表格单元格，例如
和
将不起作用
我们使用它在所有浏览器中获得背景色（仍然需要IE9+）
如果您不介意使用图像而不是背景色（或者可能是带有您背景色的图像），下面的解决方案在FireFox、Chrome甚至IE中都适用，没有任何过度使用。在页面上的某个位置设置图像，并将其隐藏，直到用户打印
带有背景图像的页面上的html
<img src="someImage.png" class="background-print-img">

}
如果您希望创建“打印机友好”页面，我建议在@media print CSS中添加“！important”。这鼓励大多数浏览器打印您的背景图像、颜色等
示例：
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

我想我应该从最近的打印css体验中添加最近和2015年的相关帮助
无论打印对话框设置如何，都可以打印背景和颜色
要做到这一点，我必须结合使用！重要信息&-webkit打印颜色调整：精确！重要信息获取正确打印的背景和颜色
另外，在声明颜色时，我发现最顽固的区域需要直接定义到目标。例如：
.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

<div class="foo">
 <p class="red">Some text</p>
</div>


一些文本

还有你的CSS：
.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */

.red{颜色：红色！重要}
.foo{color:red！important}/*发现了这个问题，因为我在尝试从谷歌应用程序脚本中的html输出生成PDF时遇到了类似的问题，其中背景颜色也没有“打印”
-webkit打印颜色调整：精确和！重要的
解决方案当然不起作用，但是框阴影：插入0 1000px黄金没有。。。很棒的黑客，非常感谢：）
对于chrome，我用过类似的东西，它对我来说很有用
在body标签中
<body style="-webkit-print-color-adjust: exact;"> </body>



或者对于一个特定的元素，假设您有一个表，并且您想要填充一个td，即一个单元格
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

到2016/10年在Chrome、Firefox、Opera和Edge上测试并运行。应可在任何浏览器上使用，并且应始终保持预期的外观
好的，我做了一个小的跨浏览器实验来打印背景色。复制，粘贴和享受
这是一个完整的可打印HTML页面，用于引导：
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>


/*两个z索引都在解析递归元素包含*/
[背景色]{
z指数：0；
位置：相对位置；
-webkit打印颜色调整：精确！重要；
}
[背景色]画布{
显示：块；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
嘿这管用！

哦。。。这也适用于递归！！
.table td,
.table th {
    background-color: #fff !important;
}

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

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>

                      :) Will Work

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