CSS 样式的 <figure> 圆不会显示在打印视图中

Question

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

我有 -- 在 IE 打印对话框中检查了 "print background colors an images"，我在 Chrome 打印对话框中检查了 "background graphics"。 -- 尝试添加 -webkit-print-color-adjust: exact; css 中的多个位置，包括 figure{}、.sphere{} 和 .red{} -- 尝试添加一个 print-backgrounds chrome 扩展，我后来了解到它已经过时了。

HTML:

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

CSS 对于 Chrome:

.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);  
}

CSS 对于 IE9:

.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

当 link 编辑您的样式表时，请确保在 link.

中包含 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）。为什么？同上。它是一般 css 部分的直接 copy/paste（加上 !important）。但它奏效了！

干杯！

CSS 样式的 <figure> 圆不会显示在打印视图中

CSS-styled <figure> of circle will not display in print-view

html

css

printing

background

figure