Как заставить браузеры печатать фоновые изображения в CSS? - PullRequest
Новая
       31

Как заставить браузеры печатать фоновые изображения в CSS?

92 голосов
/ 12 июля 2011

Этот вопрос задавался ранее , но решение не применимо в моем случае. Я хочу убедиться, что определенные фоновые изображения печатаются, потому что они являются неотъемлемой частью страницы. (Они не являются изображениями непосредственно на странице, потому что есть несколько из них, используемых в качестве спрайтов CSS.)

Другое решение по этому же вопросу предлагает использовать list-style-image, который работает только в том случае, если у вас есть разные изображения для каждой иконки, спрайты CSS невозможны.

Есть ли другое решение, кроме создания отдельной страницы со значками в строке?

Ответы [ 12 ]

0 голосов
/ 08 октября 2018

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

 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;
0 голосов
/ 10 сентября 2018

Вы можете сделать несколько таких трюков: 

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

В теге body: 

<img src="YOUR IMAGE URL" class="whater"/>
Страница:
...