CSS样式 圆形不会在打印视图中显示

Question

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

我已经 - 在IE打印对话框中检查了“打印背景颜色图像”，并在Chrome打印对话框中检查了“背景图形”。 - 尝试添加-webkit-print-color-adjust：exact; css中的一些地方，包括图{}，。{{{}和.red {} - 尝试添加一个打印背景的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">

Answer 2

有趣的是，经过近3年的努力，我终于被要求（再次）在这里为MVC应用程序创建一个打印视图。所以我再次搜索了我的问题并想到'这个人正在问我在追求什么！'。是的，原来这是我自己的问题（仍然没有答案）......

从我自己的经验中获得，并且在我第一次提出问题之后搜索我写的其他代码，这里是答案，......

@media print
{
    .red {
        background: radial-gradient(circle at 10px 10px, red, #000) !important;  
    }

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

    .green {
        background: radial-gradient(circle at 10px 10px, #00af00, #000) !important;  
    }

}

是的，我只需要在css文件的@media打印部分重新描述背景颜色特征（并包括！important）。为什么？ IDK。这是一般css部分的直接复制/粘贴（加上！重要）。但它奏效了！

干杯!