打印带有线性渐变和边框的 CSS 对象时，线性渐变背景消失答案

【问题标题】：Linear Gradient Background disappears when printing a CSS object with a linear gradient and a border打印带有线性渐变和边框的 CSS 对象时，线性渐变背景消失
【发布时间】：2015-05-26 04:48:42
【问题描述】：

如果您尝试使用 chrome 打印以下页面，您将获得黑色背景。如果删除边框，则可以打印背景。请进行测试。它是 Chrome 中的错误吗？

<style>
#div1{
  width:340px;height:150px;
  border:1px solid #000;
  background:linear-gradient(#fff,#0cf);
}
</style>
<div id=div1>
  Something
</div>

谢谢

【问题讨论】：

你试过了吗：background-image:linear-gradient(#fff,#0cf);
是的，我也试过这个语法：背景：-webkit-linear-gradient(bottom, #fff,#0cf);
你的结果和我一样吗？
无法在 W7 上的 Chrome 42.0.2311.50 beta-m（64 位）中重现
我发现这被列为 Chromium 上的回归错误：Good Build {41.0.2264.0 Base Position: 309803} Bad Build {41.0.2272.0 Base Position: 310958} code.google.com/p/chromium/issues/detail?id=467671 这可能解释了a）已知问题存在并且 b) @Paulie_D 没有看到它，因为它已在 beta 版本中修复（并且在发布版本中仍然存在）

标签： css google-chrome printing background border

【解决方案1】：

我相信我也有同样的问题。 Chrome 41.0.2272.101m 的打印预览和打印输出显示如下：

虽然 Firefox 打印正确（虽然不是很吸引人）

该区域由渐变填充组成

.greenRedGradient
{
    background: #00aa00; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #00aa00 0%, #ffff00 50%, #ff0000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#00aa00), color-stop(50%,#ffff00), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #00aa00 0%,#ffff00 50%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #00aa00 0%,#ffff00 50%,#ff0000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #00aa00 0%,#ffff00 50%,#ff0000 100%); /* IE10+ */
    background: linear-gradient(to right,  #00aa00 0%,#ffff00 50%,#ff0000 100%); /* W3C */
    padding:3px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aa00', endColorstr='#ff0000',GradientType=1 ); /* IE6-8 */
}

底部/侧面被圆角边框包围

.areaGroup > footer > div:last-child {
    width:66%; overflow:hidden; border:2px solid black; border-top:0; padding:0 4px; padding-top:2px;
    webkit-bottom-left-border-radius: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-left-radius: 8px;
    webkit-bottom-right-border-radius: 8px; -moz-border-radius-bottomright: 8px; border-bottom-right-radius: 8px;
}

有问题的 div：

<div class="greenRedGradient">
    <img src="/img/FeedbackFormArrows-Strength.png" style="float:left;" alt="Feedback form arrow indicating strength"/>
    <div style="margin-left:94px;">
        <img src="/img/FeedbackFormArrows-NeedsAttention.png" style="float:right;" alt="Feedback form arrow indicating need of attention">
        <div style="background:url(/img/FeedbackFormArrows-Dash.png) repeat-x; height:32px; margin-right:145px;"></div>
    </div>
</div>

我可以注释掉强度 Needs Attention 的三个 PNG（透明背景），这对 Chrome 打印渐变的方式没有影响。

我不认为这有什么区别，但先发制人地期待这个问题，错误打印区域上方的 6 个颜色区域是使用 RBGA CSS 代码以 20% 的 Alpha 透明度完成的，如下所示，它们打印正确：

.r21{ background: rgba( 031, 183, 000, 0.20 ); }
.r22{ background: rgba( 127, 228, 000, 0.20 ); }
.r23{ background: rgba( 224, 255, 000, 0.20 ); }
.r24{ background: rgba( 255, 230, 000, 0.20 ); }
.r25{ background: rgba( 255, 134, 000, 0.20 ); }
.r26{ background: rgba( 255, 033, 000, 0.20 ); }

我 - 相信 - 这是最近的一个问题，它曾经可以正确打印，但我完全不能肯定，所以我认为它不是相关/值得信赖的信息。

【讨论】：

谢谢Thistledowne。在您的示例中，我不知道您在哪里使用 r21 到 r26 类。我的例子很简单。它表明只有当我添加边框时才会出现问题。

【解决方案2】：

Chrome 的 M42 版本已完成测试并已推送，因此如果用户的浏览器是最新的，则此回归错误应该不再存在。

【讨论】：

【解决方案3】：

我也遇到过同样的问题，但意识到这不是 css 问题。打印选项可能有问题。在打印屏幕中启用“背景图形”。

【讨论】：