CSS @media печатает проблемы с background-color; - PullRequest
Новая
       25

CSS @media печатает проблемы с background-color;

159 голосов
/ 09 октября 2010

Я новичок в этой компании, и у нас есть продукт, который использует мили CSS.Я пытаюсь создать для нашего приложения таблицу стилей для печати, но у меня возникают проблемы с background-color в @media print. 

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

Все остальное работает, я могу изменить границы и тому подобное, но background-color не появится в печати.Теперь я понимаю, что вы не сможете ответить на мой вопрос без более подробной информации.Мне было просто любопытно, был ли у кого-то этот вопрос или что-то подобное раньше.

Ответы [ 17 ]

3 голосов
/ 13 апреля 2016

Обнаружил эту проблему, потому что у меня была похожая проблема при попытке сгенерировать PDF из вывода html в Google Apps Script, где фоновые цвета также не «распечатаны».

Решения -webkit-print-color-adjust:exact; и !important, конечно, не сработали, но box-shadow: inset 0 0 0 1000px gold; действительно ... отличный хак, большое спасибо:)

2 голосов
/ 15 октября 2016

Проверено и работает над Chrome, Firefox, Opera и Edge к 2016/10 году.Должен работать в любом браузере и всегда должен выглядеть как положено.

Хорошо, я провел небольшой кросс-браузерный эксперимент для печати цветов фона.Просто скопируйте, вставьте и наслаждайтесь!

Вот полная печатная HTML-страница для начальной загрузки: 

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>
2 голосов
/ 30 сентября 2015

Думаю, я бы добавил недавнюю и актуальную помощь 2015 года из недавнего опыта печати css.

Возможность печатать фоны и цвета независимо от настроек диалогового окна печати.

Для этого мне пришлось использовать комбинацию ! Важный & -webkit-print-color-Adjust: точный! Важный чтобы фон и цвета печатались правильно.

Кроме того, при объявлении цветов я обнаружил, что наиболее упрямые области нуждаются в определении непосредственно для вашей цели. Например: 

<div class="foo">
 <p class="red">Some text</p>
</div>

И ваш CSS: 

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */
1 голос
/ 27 марта 2013

В некоторых случаях (блоки без содержимого, но с фоном) его можно переопределить с помощью границ, индивидуально для каждого блока.

Например: 

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}
1 голос
/ 31 июля 2012

Лучшее «решение», которое я нашел, - это выделить заметную кнопку или ссылку «Печать», которая открывает небольшое диалоговое окно, в котором смело, кратко и кратко объясняется, что им необходимо настроить параметры принтера (с помощью инструкции ABC 123). включить фоновую и графическую печать. Это было очень успешно для меня.

0 голосов
/ 14 октября 2014

Вы можете использовать тег canvas и «рисовать» фон, который работает на IE9, Gecko и Webkit.

0 голосов
/ 10 февраля 2015

Если вы не возражаете против использования изображения вместо цвета фона (или, возможно, изображения с цветом фона), приведенное ниже решение сработало для меня в FireFox, Chrome и даже IE без каких-либо переопределений.Установите изображение где-нибудь на странице и скрывайте его, пока пользователь не напечатает.

HTML-код на странице с фоновым изображением 

<img src="someImage.png" class="background-print-img">

Css 

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}

Страница:
...