15

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

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

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

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

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

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

4

6 回答 6

22

我意识到这是一个老问题，但请注意，可以在 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（一个用于阴影，带有过滤器黑客和透明文本，另一个用于没有阴影的文本）

于 2014-01-15T13:47:02.143 回答
2

这是解决方案：

@media print {
  .item {
    -webkit-filter: drop-shadow(4px 4px 1px #ccc);
    text-shadow: 4px 4px 1px #ccc;
  }
}
于 2015-11-07T10:48:07.050 回答
2

如果有人正在寻找一种方法来避免使用 a 栅格化元素的内容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);
}

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

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

于 2019-08-29T16:53:02.837 回答
1

我使用了所有可能的解决方案，但边框阴影（带有阶梯渐变）会显示在我的页面上，但当我在页面上执行 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" >
于 2019-01-22T18:11:57.623 回答
0

我试过了

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

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

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

.thing {
    -webkit-print-color-adjust: exact;
    -webkit-filter: blur(0);
}
于 2020-11-17T02:08:52.153 回答
-1

您无需妥协您的网页以使其看起来漂亮打印。只需定义一个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 有一篇关于如何设置打印样式表的有用文章。

于 2012-12-20T15:24:43.453 回答