Text-shadow и box-shadow во время печати (Chrome)

Я делаю веб-сайт для печати с использованием HTML, CSS и JS.

К сожалению, я не могу использовать свойство CSS, называемое text-shadow, потому что тень за текстом печатает как сплошной черный текст без размытия или прозрачности.

Такая же проблема возникает, когда я пытаюсь использовать box-shadow для любых текстовых отпечатков, таких как сплошной черный цвет без прозрачности.

Я использую Chrome со стилем html {-webkit-print-color-adjust: exact;}, чтобы обеспечить печать всех цветов фона.

Любое обходное решение? Я бы предпочел не использовать фоновое изображение.

Изменить: Я не хочу скрывать тени, это очень легко, конечно. Я хочу, чтобы тени были напечатаны правильно.

Ответ 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);
}

(Я предпочитаю задавать непрозрачность, а не blur, как используется в ошибке, просто потому, что она, скорее всего, вызывает меньше проблем).

Обратите внимание, что это ограничит разрешение печати (фильтр позволяет отправить растрированную версию), поэтому текст может стать труднее читать. Если вы действительно хотите обойти это, я бы предложил дублировать div (один для тени, с фильтром взломать и прозрачный текст, а другой для текста без тени)

Ответ 2

Вот решение:

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

Ответ 3

Я использовал все возможные решения для этого, но тень от границы (со ступенчатым градиентом) будет отображаться на моей странице, но не тогда, когда я нажимаю Ctrl + P на странице и either- печатаю страницу или сохраняю как PDF. Я даже used-

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

Я делаю то же самое Ctrl + P на этом page- 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

Если кто-то ищет способ избежать растеризации содержимого элемента с помощью 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);
}

Это создает псевдоэлемент в начале элемента, который вы хотите иметь тень. Псевдоэлемент имеет такой же размер, что и родительский элемент, и тогда тень применяется только к нему. Таким образом, тень может быть растеризована, а остальное содержимое родительского элемента - нет.

Есть несколько проблем, если у вас есть границы, если ваш элемент не поддерживает дочерние элементы и т.д., Но это работает в большинстве случаев.

Ответ 5

Вам не нужно компрометировать свою веб-страницу, чтобы она выглядела довольно печатной. Просто определите 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 имеет полезную статью о Как настроить лист стиля печати.