Question

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

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

Thnks

Answer 1

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

Print Output from Chrome v41.0.2272.101m (screencapture)

虽然Firefox打印正确（虽然没有吸引力） Firefox 32.0.2 (crop from Acrobat Distiller PDF output)

该区域由渐变填充

组成

.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>

我可以注释掉三个PNG（透明背景）的强度＆lt;，---破折号---和＆gt;需要注意，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 ); }

我 - 相信 - 这是一个最近的问题，并且它用于正确打印，但我不能肯定地说，所以我不认为它是相关/值得信赖的信息。

Answer 2

Chrome的版本M42已经过测试版并被推送，因此如果用户＆＃39;浏览器是最新的。

Answer 3

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

使用线性渐变和边框打印CSS对象时，线性渐变背景会消失

3 个答案: