Как заставить браузеры печатать фоновые изображения в 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>

Обязательно используйте атрибут! Important. Это значительно увеличивает вероятность сохранения ваших стилей при печати.

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

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

Как сказал @ ckpepper02, опция body content: url работает хорошо. Однако я обнаружил, что если вы немного измените его, вы можете просто использовать его для добавления своего рода изображения заголовка с помощью псевдоэлемента: before следующим образом.

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

Это приведет к перемещению изображения вверху страницы, и, судя по моему ограниченному тестированию, оно работает в Chrome и IE9.

-hanz

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

Одним из недостатков является то, что для того, чтобы это работало в 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, когда вы добавляете атрибут! important к фоновому изображению, убедитесь, что вы сначала добавили атрибут, и повторите попытку, вы можете сделать это так

    .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 {
}

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

Вы можете проделать такие трюки:

<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"/>