Question

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

我有 - 检查＆＃34;打印背景颜色图像＆＃34;在IE打印对话中，我已检查过＆＃34;背景图形＆＃34;在Chrome打印对话框中。 - 尝试添加-webkit-print-color-adjust：exact;到css中的许多地方，包括图{}，。{{{}和.red {} - 尝试添加一个打印背景镀铬扩展，我后来才知道它已经过时了。

HTML：

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

Chrome for 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);  
}

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部分的直接复制/粘贴（加上！important）。但这有效！

干杯！

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

2 个答案: