text-shadow and box-shadow while printing (Chrome)

前端未结

关注

 6  1282

礼貌的吻别

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

Unfortunately I cannot use CSS property called text-shadow, because shadow behind te

相关标签:

6条回答

你的背包

2021-01-17 13:15
I tried
```
html {
    -webkit-print-color-adjust: exact;
    -webkit-filter: opacity(1);
}
```
But it causes links on PDF non-clickable for unknown reason.

After I change it to the css below, both shadow and link problems are solved.
```
.thing {
    -webkit-print-color-adjust: exact;
    -webkit-filter: blur(0);
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
猫巷女王i

2021-01-17 13:17
I used all the possible solutions to this but the border shadow(with stepped gradient) would show up on my page, but not when I do a Ctrl+P on the page and either- print the page or save as PDF. I even used-
```
-webkit-print-color-adjust:exact;
-webkit-filter:opacity(1);
```
I do the same Ctrl+P on this page- https://css-tricks.com/examples/BodyBorder/kottke.php and it works fine.

Solution: I had to remove the bootstrap.css included at the top of my page for the border shadow to show up on my PDF, or when I print the page.
```
<link href="/lib/bootstrap-3.2.0/dist/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" >
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
面向向阳花

2021-01-17 13:19
If anyone is looking for a way to avoid rasterizing the content of the element with a box-shadow, this is what I used (extended from @Dave's answer):
```
.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);
}
```
This creates a pseudo-element at the beginning of the element you want to have a shadow. The pseudo-element is sized the same as the parent and then the drop shadow is applied to it only. That way, the drop shadow can be rasterized while the rest of the content of the parent is not.

There are a few issues if you have borders, if your element doesn't support children, etc. but this works in most cases.
0 讨论(0)
发布评论:

提交评论
- 加载中...
渐次进展

2021-01-17 13:26
You don't need to compromise your web page to make it look pretty printed. Simply define a print.css that makes the printed view suit your needs.
```
# index.html
<head>
  <link href="/css/print.css" media="print" rel="stylesheet" type="text/css" /> 
</head>

# print.css
.shadow {
  text-shadow: none;
}
```
For more, Smashing Magazine has a helpful article on How To Set Up A Print Style Sheet.
0 讨论(0)
发布评论:

提交评论
- 加载中...
南笙

2021-01-17 13:28
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);
}
```
(I prefer to set opacity rather than blur as used in the bug, simply because it seems likely to cause fewer problems).

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)
0 讨论(0)
发布评论:

提交评论
- 加载中...

时光说笑

2021-01-17 13:30

Here is the solution:

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

0 讨论(0)