Jak zmusić przeglądarki do drukowania obrazów tła w CSS?

To pytanie zadawano już wcześniej, ale w moim przypadku rozwiązanie nie ma zastosowania. Chcę się upewnić, że określone obrazy tła są drukowane, ponieważ stanowią integralną część strony. (Nie są to obrazy bezpośrednio na stronie, ponieważ kilka z nich jest używanych jako sprite'y CSS).

Inne rozwiązanie tego samego pytania sugeruje użycie list-style-image, które działa tylko wtedy, gdy masz inny obraz dla każdej ikony, a sprite'y CSS nie są możliwe.

Oprócz stworzenia osobnej strony z wbudowanymi ikonami, czy jest inne rozwiązanie?

Masz bardzo małą kontrolę nad metodami drukowania przeglądarki. Co najwyżej możesz SUGEROWAĆ, ale jeśli w ustawieniach drukowania przeglądarki jest ustawiona opcja „nie drukuj obrazów tła”, nic nie można zrobić bez przepisywania strony w celu przekształcenia obrazów tła w ruchome obrazy „pierwszego planu”, które znajdują się za innymi treściami.

W Chrome i Safari możesz dodać styl CSS -webkit-print-color-adjust: exact;do elementu, aby wymusić wydrukowanie koloru tła i / lub obrazu

Przeglądarki mają domyślnie wyłączoną opcję drukowania kolorów tła i obrazów. Możesz dodać kilka linii w CSS, aby to ominąć. Poprostu dodaj:

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

Znalazłem sposób na wydrukowanie obrazu tła za pomocą CSS. To trochę zależy od tego, jak układasz tło, ale wydaje się, że działa w mojej aplikacji.

Zasadniczo dodajesz na @media printkońcu swojego arkusza stylów i nieznacznie zmieniasz tło treści.

Na przykład, jeśli twój obecny CSS wygląda tak:

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

Na końcu arkusza stylów dodajesz:

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

To dodaje obraz do treści jako obraz „pierwszego planu”, dzięki czemu można go wydrukować. Być może będziesz musiał dodać kilka dodatkowych CSS, aby zrobić z-indexwłaściwy. Ale znowu, od tego, jak jest ułożona Twoja strona.

To zadziałało, gdy nie mogłem wyświetlić obrazu nagłówka w widoku wydruku.

Poniższy kod działa dobrze dla mnie (przynajmniej dla Chrome).

Dodałem również pewne kontrolki marginesów i orientacji strony. (Pionowa, pozioma)

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

Upewnij się, że używasz! Important atrybutu. To znacznie zwiększa prawdopodobieństwo zachowania stylów po wydrukowaniu.

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

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

Jak powiedział @ ckpepper02, opcja body content: url działa dobrze. Zauważyłem jednak, że jeśli nieznacznie go zmodyfikujesz, możesz po prostu użyć go do dodania obrazu nagłówka sortów za pomocą pseudoelementu: before, jak poniżej.

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

Spowoduje to wyślizgnięcie się obrazu na górę strony, a po moich ograniczonych testach działa w Chrome i IE9

-hanz

Użyj pseudo-elementów. Podczas gdy wiele przeglądarek ignoruje obrazy tła, pseudo-elementy z zawartością ustawioną na obraz technicznie NIE są obrazami tła. Następnie możesz ustawić obraz tła mniej więcej w miejscu, w którym powinien się znaleźć (chociaż nie jest to tak łatwe ani precyzyjne jak oryginalny obraz).

Jedną z wad jest to, że aby to działało w Chrome, musisz określić to zachowanie poza zapytaniem o media drukowane, a następnie pokazać je w bloku zapytania o media drukowane. Więc coś takiego ...

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

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

Wadą jest to, że obraz jest często pobierany podczas normalnego ładowania strony, co powoduje niepotrzebne ładowanie. Możesz tego uniknąć, używając tego samego obrazu / ścieżki, którego używałeś do oryginalnego, widocznego obrazu.

działa w Google Chrome po dodaniu! ważny atrybut do obrazu tła upewnij się, że najpierw dodajesz atrybut i spróbuj ponownie, możesz to zrobić w ten sposób

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

}

Możesz użyć obramowań dla stałych kolorów.

 borderTop: solid 15px black;

a dla tła gradientowego możesz użyć:

    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 proponuje eleganckie rozwiązanie, wykorzystując niestandardowy punktor zamiast obrazu tła:

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

Włączając to w

@media print {
}

blok, jestem w stanie zamienić białe na przezroczystym logo na ekranie, renderowane jako obraz tła, czarnym na przezroczystym logo do druku.

Możesz zrobić kilka takich sztuczek:

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

W tagu ciała:

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