Question

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

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

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

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

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

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

Answer 1

我意识到这是一个老问题，但请注意，可以在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);
}

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

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

Answer 2

以下是解决方案：

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

Answer 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" >

Answer 4

如果有人在寻找避免使用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);
}

这将在您要具有阴影的元素的开头创建一个伪元素。伪元素的大小与父元素大小相同，然后仅对其应用阴影。这样，可以对阴影进行栅格化，而对父项的其余内容不进行栅格化。

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

Answer 5

我尝试过

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

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

将其更改为下面的css之后，阴影和链接问题都得到解决。

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

Answer 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上有一篇有用的文章。

打印时的文字阴影和阴影（Chrome）

6 个答案: