Як змусити браузери друкувати фонові зображення в CSS?

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

Ще одне рішення цього ж питання пропонує використовувати list-style-image, яке працює лише за наявності іншого зображення для кожної піктограми, без CSS-спрайтів.

Окрім створення окремої сторінки з вбудованими піктограмами, є ще одне рішення?

У вас дуже мало контролю над способами друку браузера. У кращому випадку ви можете ЗАПРАВИТИ, але якщо в налаштуваннях друку браузера є "не друкувати фонові зображення", ви нічого не можете зробити, не переписавши сторінку, щоб перетворити фонові зображення на плаваючі зображення "переднього плану", які, можливо, стоять поза іншим вмістом.

За допомогою Chrome та Safari ви можете додати стилю CSS -webkit-print-color-adjust: exact;до елемента, щоб змусити друкувати колір фону та / або зображення

У веб-переглядачах за замовчуванням є можливість друкувати кольори фону та зображення вимкнено. Ви можете додати кілька рядків у CSS, щоб обійти це. Просто додайте:

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}

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

По суті, ви додаєте @media printдо кінця таблиці стилів і трохи змінюєте фон тіла.

Наприклад, якщо ваш поточний CSS виглядає так:

body {
background:url(images/mybg.png) no-repeat;
}

В кінці свого таблиці стилів ви додаєте:

@media print {
body {
   content:url(images/mybg.png);
  }
}

Це додає зображення тілу як зображення "переднього плану", тим самим робить його для друку. Вам може знадобитися додати кілька додаткових CSS, щоб зробити z-indexналежним. Але знову ж таки, це залежить від того, як викладено вашу сторінку.

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

Наведений нижче код добре працює для мене (принаймні, для Chrome).

Я також додав кілька елементів керування полями та орієнтацією сторінки (портрет, пейзаж)

<style type="text/css" media="print">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}
</style>

Обов’язково використовуйте важливий атрибут! Це різко збільшує ймовірність збереження ваших стилів під час друку.

#example1 {
    background:url(image.png) no-repeat !important;
}

#example2 {
    background-color: #123456 !important;
}

Як сказав @ ckpepper02, параметр content body: url працює добре. Однак я виявив, що якщо ви його трохи модифікуєте, ви можете просто використовувати його для додавання заголовкового зображення у вигляді заголовків за допомогою елемента: перед псевдоелементом, як описано нижче.

@media print {
  body:before { content: url(img/printlogo.png);}
}

Це ковзатиме зображення вгорі сторінки, і з мого обмеженого тестування, воно працює в Chrome і IE9

-ханц

Використовуйте елементи psuedo. Хоча багато браузерів ігнорують фонові зображення, елементи psuedo із вмістом, встановленим на зображення, технічно НЕ фонові зображення. Потім ви можете розмістити фонове зображення приблизно там, де воно повинно було пройти (хоча це не так просто і точно, як оригінальне зображення).

Одним з недоліків є те, що для роботи в Chrome потрібно вказати цю поведінку поза запитом друкованих медіа, а потім зробити її видимою у блоці запитів медіа друку. Отже, щось подібне ...

.image:before{
        visibility:hidden;
        position:absolute;
        content: url("your/image/path");
    }   

@media print {
.image{
   position:relative;
    }
    .image:before{
       visibility:visible;
       top:etc...
    }       
}

Недолік полягає в тому, що зображення часто завантажуватимуться при звичайному завантаженні сторінки, додаючи зайву об'ємність. Ви можете уникнути цього, використовуючи той самий образ / шлях, який ви вже використовували для вихідного, видимого зображення.

він працює в google chrome, коли ви додаєте! важливий атрибут до фонового зображення, переконайтеся, що ви додаєте атрибут спочатку та спробуйте ще раз, ви можете це зробити так

    .inputbg {
background: url('inputbg.png') !important;  

}

Можна використовувати рамки для фіксованих кольорів.

 borderTop: solid 15px black;

а для фону градієнта можна використовувати:

    box-sizing: border-box;
    border-style: solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-image: linear-gradient(to right, red, blue) 100%;
    border-image-slice: 1;
    border-width: 18px;

https://gist.github.com/danomanion/6175687 пропонує елегантне рішення, використовуючи спеціальну кулю замість фонового зображення:

   a.logo {
     display: list-item;
     list-style-image: url("../images/desired-background.png");
     list-style-position: inside;
   }

Включивши це в межах

@media print {
}

Блок, я можу замінити білий-прозорий логотип на екрані, виконаний як фонове зображення, логотипом чорного кольору на прозорий для друку.

Ви можете виконати кілька таких хитрощів:

<style>
    @page {
        size: 21cm 29.7cm;
        size: landscape
        /*margin: 30mm 45mm 30mm 45mm;*/

    }
    .whater{
        opacity: 0.05;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 9999;
    }
</style>

У тезі тіла:

<img src="YOUR IMAGE URL" class="whater"/>