跨度背景颜色设置与javascript没有打印

Question

我有以下代码为使用Morris Js构建的图形设置图例：

grafico1.options.data.forEach(function(label, i) {
  var legendItem = $('<span></span></br>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<br><span>&nbsp;</span>');
  legendItem.find('span')
    .css('background-color', grafico1.options.colors[i])
    .css('width', '20px')
    .css('display', 'inline-block')
    .css('margin-right', '15px')
    .css('float','left');
  $('#legend').append(legendItem).css('text-align','left').css('font-size','15px')
});

图表如下：

但是当我想要打印图形时，<span>元素的所有背景颜色都会消失，就像在这张图片中一样：

我已经尝试在我的CSS中包含body { -webkit-print-color-adjust: exact; }并在打印时设置背景颜色，但似乎没有任何效果。 它不仅仅是Chrome问题，我还尝试过许多其他浏览器。 我感谢您的帮助。非常感谢你。

Answer 1

问题是我使用bootstrap作为外部css。他们在CSS的background: transparent部分有一个@media print{}。只需删除该行，问题就解决了！