html - 圆圈的 CSS 样式 <figure> 不会显示在打印 View 中

Question

我创建了一些带有图形 html 元素和 css 样式的 3D 球体，但我无法在打印 View 中显示它们。我正在尝试使用 IE9 和 Chrome v45。我该怎么做才能打印这些内容？我希望答案不是将元素更改为图形以外的其他内容，因为这需要进行许多其他更改。

我有 -- 在 IE 打印对话框中选中“打印背景颜色和图像”，我在 Chrome 打印对话框中选中“背景图形”。 -- 尝试添加 -webkit-print-color-adjust: exact;到 css 中的许多地方，包括 figure{}、.sphere{} 和 .red{} -- 尝试添加一个 print-backgrounds chrome 扩展，后来我才知道它已经过时了。

HTML:

<figure class="red sphere"></figure>

Chrome 的 CSS:

.sphere {
  display: block; 
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;  
  height: 30px;
  width: 30px;
  margin: 5px auto auto auto;  
}

.red {
    background: radial-gradient(circle at 10px 10px, red, #000);  
}

IE9 的 CSS:

.sphere {
  display: block;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;  
  height: 30px;
  width: 30px;
  margin: 5px auto auto auto;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=40, style=2);
}

.red {
    background: red; 
}

谢谢!

Answer 1

链接样式表时确保有 media=all在链接中。

它应该看起来像这样:

<link rel="stylesheet" type="text/css" media="all" href="styles.css">

或设置一个特定的print像这样的样式表:

<link rel="stylesheet" type="text/css" media="print" href="print.css">