文本阴影和阴影（打印）（Chrome）

问题描述

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

I'm making some printable calendar website using HTML, CSS and JS.

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

Unfortunately I cannot use CSS property called text-shadow, because shadow behind text prints as solid black text without any blur or transparency.

当我尝试使用 box-shadow 对于任何div - 阴影打印如纯黑色，没有透明度。

Same problem occurs when I'm trying to use box-shadow for any div - shadow prints like solid black color with no transparency.

code> html {-webkit-print-color-adjust：exact;} 以确保将打印所有背景颜色。

I'm using Chrome with style html {-webkit-print-color-adjust: exact;} to ensure all background colors will be printed.

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

Any workaround? I would prefer not to use any background image.

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

I don't want to hide shadows, it's very easy of course. I want to have shadows printed correctly.

推荐答案

我意识到这是一个老问题，但只是要注意，使阴影在Chrome中正确打印。您需要设置 -webkit-print-color-adjust 和一个过滤器，如此错误线程中所示：

I realise this is an old question, but just to note that it is possible to make shadows print correctly in Chrome. You need to set both -webkit-print-color-adjust and a filter, as found in this bug thread: https://code.google.com/p/chromium/issues/detail?id=174583

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

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

(I prefer to set opacity rather than blur as used in the bug, simply because it seems likely to cause fewer problems).

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

Note that this will limit the resolution of the print (filter makes it send a rasterised version), so text might become harder to read. If you really want to work around that, I'd suggest duplicating the div (one for the shadow, with the filter hack and transparent text, and another for the text with no shadow)

这篇关于文本阴影和阴影（打印）（Chrome）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！