Проблеми друку CSS @media з кольором тла;

176

Я новачок у цій компанії, і ми маємо продукт, який використовує милі 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 не надходжу в друку. Тепер я розумію, що ви, можливо, не зможете відповісти на моє запитання без більш детальної інформації. Мені просто цікаво, чи хтось мав це питання чи щось подібне раніше.

css  media-queries 
— Вестон Уотсон
джерело
Ну, він проходить W3C CSS-валідатор ( jigsaw.w3.org/css-validator ). Це дивно
— GôTô
Це більше не повинно бути проблемою. Я прийшов до цього питання, тому що у мене була сторінка завантаження, і у завантажувальному закладі є @media printзапит, який видаляє кольори фону з таблиць (наприклад, смужки).
— Мартін Тома
@MartinThoma Як ви вирішили проблему? Ви видалили CSS із шаблону завантаження?
— EduLopez

Відповіді:

242

Якщо у користувача налаштування друку вимкнено "Друк фонових кольорів та зображень", жоден CSS не перекриє це, тому завжди враховуйте це. Це налаштування за замовчуванням .

Після того, як це встановлено, воно друкує фонові кольори та зображення, те, що у вас там, працюватиме.

Воно зустрічається в різних плямах. В IE9beta він знаходиться в розділі Друк-> Параметри сторінки в розділі Параметри паперу

У FireFox він знаходиться в Налаштування сторінки -> [Формат і параметри] на вкладці Параметри.

— Райан Терньє
джерело
10
чудово, ти щойно врятував мені години, коли ламав мій мозок над цим CSS.
— Вестон Уотсон
162
За допомогою Chrome і Safari ви можете додати стиль css "-webkit-print-color-prilagod: точно;" до елемента, щоб змусити надрукувати колір тла та / або зображення
— Marco Bettiolo
11
@MarcoBettiolo, здається, не працює над останньою версією webkit, але важливо, проте
— Hedde van der Heide
2
Додавання! Важливого до правила вирішило і для мене.
— Тіаго Дуарте
14
Щоб розширити це, я додав колір-коригування: точне; для ФФ працювати. Тож мій повний код*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
— BitBug
252

Щоб увімкнути фоновий друк у Chrome:

body {
  -webkit-print-color-adjust: exact !important;
}
— дролекс
джерело
7
Здається, це вирішило мою проблему з друком таблиці з різними кольорами рядків.
— Віктор Дж. Гарсія
Переконайтеся, що ви використовуєте правильний кожух для шляху зображення, оскільки діалогове вікно друку Chrome не завантажує зображення з першої спроби. Це трапляється лише в тому випадку, якщо URL-адреса вашого фонового зображення не відповідає заголовку назви фізичної папки. (Повідомляється у версії 48.0.2564.109 м)
— MPaul
3
що чергується у firefox та IE
— Shan Khan
5
Примітка для майбутніх мандрівників у часі: ви можете скористатися color-adjustнатомість.
— Константин Ван
@ КонстантинВан він не підтримується в Chrome станом на квітень 2019 року. Це документація на firefox.
— Томас
83

Зрозумів:

CSS: 

box-shadow: inset 0 0 0 1000px gold;

Працює для всіх коробок - включаючи комірки таблиці !!!

  • (Якщо вірити вихідному файлу PDF-принтера ..?)
  • Тестується лише в Chrome + Firefox на Ubuntu ...
— T4NK3R
джерело
5
Ви можете додати підтримку IE8 та IE9 за допомогою. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */ Якщо ви хочете, щоб ваші спрайтові зображення були видимими, використовуйте техніку img / clip css-tricks.com/css-sprites-with-inline-images , яка надасть вам зображення в IE9 та FF ( не IE8, хоча)
— emik
2
Чудово працює у звичайних браузерах, але не в IE, навіть із пропозицією від @evami.
— woz
@woz У мене це працює в проекті з IE8 / 9. Градієнт (як і поле-тінь) додає додатковий фоновий елемент, який не усувається примусовим скиданням браузера. Ви б не хотіли поділитися своїм css?
— емік
2
Схоже, це не працює з останнім Chrome (60).
— swervo
1
Мені це не вдається в Chrome. Я використовую 69. Це говорить про те, що воно було порушено щонайменше з 60 років (відповідно до коментаря @ swervo).
— іконоборство
34

Спробуйте, це працювало для мене в Google Chrome:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>
— МАКСЕ
джерело
22

-webkit-print-color-adjust: exact; поодинціis Not enough ви повинні використовувати !importantатрибут

це попередній перегляд друку на chrome після того, як я додав їх !importantдо кожного background-colorта colorпоширювався на кожен тег

попередній перегляд друку на хромі

і це друк попереднього перегляду на хромі перед додаванням!important

введіть тут опис зображення

Тепер, щоб знати, як inject !importantподілити стиль, ознайомтеся з цією відповіддю. Я не можу ввести стиль із правилом "! важливо"

— Башеер AL-MOMANI
джерело
Можливо, це тому, що ви вже маєте таблицю стилів @print, яка скидає колір тла.
— Нікколо М.
О БОЖЕ МІЙ! це працює, але як це працює? Чи можете ви поясніть, будь ласка.
— rahim.nagori
1
Це єдине рішення, яке працювало для мене досі. <div style = "- webkit-print-color-prilagod: точно! важливо; фоновий колір: червоний! важливо;"> ... </div>
— Томас
10

Два рішення, які працюють (принаймні на сучасному Chrome - не перевірені далі):

  1. ! важливе право у звичайній роботі css-декларацій (навіть не в друку @media)
  2. Використовуйте svg
— яр1
джерело
6
! важливо вирішує проблему у кожному сучасному веб-переглядачі, якщо увімкнено "Друк кольорів і зображень фонового зображення".
— Кріс Хайнс
2
! важливо також працює без втручання користувача, якщо ви використовуєте його разом з body {-webkit-print-color-prilagod: точно; } (за коментарем вище)
— yar1
2
Я виявив, що якщо я використовую color-adjustабо варіант webkit, я насправді не потребую важливого правила.
— Касапо
7

Якщо ви хочете створити "дружні до принтера" сторінки, рекомендую додати "! Це спонукає більшість браузерів друкувати фонові зображення, кольори тощо.

ПРИКЛАДИ:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
— горіхи-н-пиво
джерело
6

Є ще одна хитрість, яку можна зробити без активації параметра рамки друку, згаданого в інших публікаціях. Оскільки кордони будуть роздруковані ви можете моделювати твердий фон колір з цим хаком:

.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}

Активуйте його, додавши клас до свого елемента:

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

Хоча для цього потрібен додатковий код та певний догляд, щоб зробити кольори фону видно, це все-таки відоме мені рішення.

Зверніть увагу на цей хак не працюватиме на інших , ніж елементи display: block;або display: table-cell;, так, наприклад , <table class="your-background">і<tr class="your-background"> не працюватиме.

Ми використовуємо це для отримання кольорів фону у всіх браузерах (все-таки, IE9 + обов'язковий).

— ядро
джерело
1
це шалений злом, але він принаймні змушує якусь форму кольору фону незалежно від налаштувань друку. блискуче, дякую.
— Бред Захер
6

Для хрому я використав щось подібне, і це спрацювало для мене.

У тезі тіла,

<body style="-webkit-print-color-adjust: exact;"> </body>

Або для конкретного елемента, скажімо, якщо у вас є таблиця, і ви хочете заповнити td, тобто клітинку,

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
— Аамір Шейх
джерело
5

Незважаючи на !importantвикористання, як правило, нахмурене, це код-образ, bootstrap.cssякий запобігає друкуванню рядків таблиці background-color.

.table td,
.table th {
    background-color: #fff !important;
}

Припустимо, ви намагаєтеся стилізувати такий HTML:

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

Щоб замінити цей CSS, розмістіть у таблиці стилів таке (більш конкретне) правило:

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

Це працює, тому що правило є більш конкретним, ніж за замовчуванням завантажувальний засіб.

— Аельфін
джерело
Після годин пошуків я знайшов цю відповідь. Я зайшов і усунув рядки з Bootstrap.css та WHAM! Кольори на фоні для друку!
— Могутній Ференгі
1
Дякую! Нарешті, це відповідь, яка мене почала працювати, але мені потрібно було додати: body {-webkit-print-color-prilagod: точно! Важливо; }
— Ocean
3

Знайшов цю проблему, оскільки у мене виникла аналогічна проблема при спробі генерувати PDF з виводу html у Google Apps Script, коли кольори фону також не "друкуються".

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

— logol
джерело
2

Думав, я додам нещодавню та відповідну допомогу у 2015 році з досвіду останнього друку css.

Могла друкувати фони та кольори незалежно від налаштувань діалогового вікна друку.

Для цього мені довелося використовувати комбінацію ! Важливо & -webkit-print-color-prilagod: точно! Важливо, щоб отримати фон та кольори для належного друку.

Також, декларуючи кольори, я виявив, що найбільш вперті області потребують визначення безпосередньо до вашої цілі. Наприклад:

<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 */
— Джонатан
джерело
2

Випробуваний та працюючий над 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>
— Героселохім
джерело
1

Найкраще "рішення", яке я знайшов, - це забезпечити помітну кнопку "Друк" або посилання, яке вискакує невелике діалогове вікно, пояснюючи сміливо, коротко і стисло, що їм потрібно відрегулювати налаштування принтера (з інструкцією від кулі ABC 123), щоб увімкнути фон та друк зображень. Це було дуже успішно для мене.

— алано
джерело
1

У деяких випадках (блоки без будь-якого вмісту, але з фоном) його можна змінити, використовуючи рамки, окремо для кожного блоку.

Наприклад:

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

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}
— Гедеон
джерело
0

Якщо ви не проти використовувати зображення замість кольору фону (або, можливо, зображення з кольором тла), наведене нижче рішення спрацювало для мене у 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;
    }

}

— ксейлі
джерело
Я взяв ваш підхід і спробував змусити його працювати на IE11, але, на жаль, не вийшло. Це було до тих пір, поки я не поставив !importantзначення для кожного атрибуту в своєму класі, який потім змусив його працювати.
— Sal Alturaigi
0

Зробіть НЕ встановітьbackground-color всередині друк таблиці стилів. Просто встановіть атрибут у звичайному файлі css, і він прекрасно працює :)

Оформити цей приклад: Остаточний HTML-шаблон для друку із заголовком та колонтитулом

Демо: Остаточний HTML-шаблон для друку із демонстрацією заголовка та нижнього колонтитулу

— Драйден Вільямс
джерело
0 
tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

Працює в Chrome і Edge

— Василь Іванов
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.