打印时的文本阴影和框阴影（Chrome）答案

【问题标题】：text-shadow and box-shadow while printing (Chrome)打印时的文本阴影和框阴影（Chrome）
【发布时间】：2012-12-08 03:38:38
【问题描述】：

我正在使用 HTML、CSS 和 JS 制作一些可打印的日历网站。

很遗憾，我不能使用名为 text-shadow 的 CSS 属性，因为文本后面的阴影打印为纯黑色文本，没有任何模糊或透明度。

当我尝试将box-shadow 用于任何 div 时，也会出现同样的问题 - 阴影打印就像没有透明度的纯黑色。

我正在使用样式为 html {-webkit-print-color-adjust: exact;} 的 Chrome 以确保打印所有背景颜色。

有什么解决方法吗？我不想使用任何背景图片。

编辑：我不想隐藏阴影，这当然很容易。我想正确打印阴影。

【问题讨论】：

最好的办法可能是删除打印样式表中的文本/框阴影。
我当然可以这样做，但我想将它们放在我的打印输出上。对不起，如果我表达得不够清楚
嗯，人们通常想删除它们，所以我和@BillyMoat 有同样的想法。这可能是打印驱动程序等的限制……但我很想知道是否有人知道更多。
是的，打印机限制似乎是一种可能性，但也许有一些“魔法”属性可以打印这些阴影。
假设您在使用文本阴影打印时遇到了死胡同，您可以在服务器端从 HTML 生成图像，因为打印图像应该没问题。当然，效果需要做很多工作;-)

标签： css google-chrome printing-web-page

【解决方案1】：

我试过了

html {
    -webkit-print-color-adjust: exact;
    -webkit-filter: opacity(1);
}

但它会导致 PDF 上的链接由于未知原因无法点击。

我改成下面的css后，shadow和link问题都解决了。

.thing {
    -webkit-print-color-adjust: exact;
    -webkit-filter: blur(0);
}

【讨论】：

【解决方案2】：

如果有人正在寻找一种方法来避免使用box-shadow 对元素的内容进行光栅化，这就是我使用的方法（从@Dave 的答案扩展而来）：

.thing {
    position: relative;
}

.thing::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: /* define your shadow here, not in .thing */;
    -webkit-print-color-adjust: exact;
    -webkit-filter: opacity(1);
}

这会在你想要有阴影的元素的开头创建一个伪元素。伪元素的大小与父元素相同，然后仅对其应用投影。这样，阴影可以被光栅化，而父级的其余内容则不被光栅化。

如果您有边框，如果您的元素不支持子元素等，则会出现一些问题，但这在大多数情况下都有效。

【讨论】：

【解决方案3】：

我为此使用了所有可能的解决方案，但边框阴影（带有阶梯渐变）会显示在我的页面上，但是当我在页面上执行 Ctrl+P 并打印时不会页面或另存为 PDF。我什至用过-

-webkit-print-color-adjust:exact;
-webkit-filter:opacity(1);

我在此页面上执行相同的 Ctrl+P - https://css-tricks.com/examples/BodyBorder/kottke.php 并且效果很好。

解决方案：我必须删除页面顶部包含的 bootstrap.css，以便在我的 PDF 上或打印页面时显示边框阴影。

<link href="/lib/bootstrap-3.2.0/dist/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" >

【讨论】：

【解决方案4】：

解决办法如下：

@media print {
  .item {
    -webkit-filter: drop-shadow(4px 4px 1px #ccc);
    text-shadow: 4px 4px 1px #ccc;
  }
}

【讨论】：

@Dave 的修复对我不起作用，这个对。显然，该错误最终将在 Chrome 61 版本中得到修复。
我是 62 版的，这仍然是个问题，而且这个修复也没有奏效。
这让我的 chrome 可以永久加载预览。

【解决方案5】：

我意识到这是一个老问题，但请注意，可以在 Chrome 中正确打印阴影。您需要同时设置 -webkit-print-color-adjust 和过滤器，如在此错误线程中找到的：https://code.google.com/p/chromium/issues/detail?id=174583

.thing {
    -webkit-print-color-adjust:exact;
    -webkit-filter:opacity(1);
}

（我更喜欢设置不透明度而不是错误中使用的blur，只是因为它似乎可能导致更少的问题）。

请注意，这会限制打印的分辨率（过滤器会使其发送光栅化版本），因此文本可能会变得难以阅读。如果你真的想解决这个问题，我建议复制 div（一个用于阴影，带有过滤器和透明文本，另一个用于没有阴影的文本）

【讨论】：

哇，这是一个可怕的错误...阴影标题变得无法使用，质量低下
显然它还会将阴影颜色更改为文本的颜色。
从 Chrome 46 开始，添加过滤器会导致文本被严重像素化。据我所知，Chrome 目前没有解决方法
@davidelrizzo 是的，我也发现了这种情况。很遗憾，但请参阅我的最后一段，了解在某些情况下可能的解决方法。
我今天也有同样的问题。今天的答案是什么？这对我不起作用！

【解决方案6】：

您无需妥协您的网页以使其看起来漂亮印刷。只需定义一个 print.css 即可使打印视图满足您的需求。

# index.html
<head>
  <link href="/css/print.css" media="print" rel="stylesheet" type="text/css" /> 
</head>

# print.css
.shadow {
  text-shadow: none;
}

有关更多信息，Smashing Magazine 在How To Set Up A Print Style Sheet 上有一篇有用的文章。

【讨论】：