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


104

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?

Odpowiedzi:


51

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.


212

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


4
To jest niesamowite. Znacznie ułatwia życie użytkownikom phantomjs / webkit
Jason,

1
@MuneemHabib To nie działa w IE, właściwie jedyną obsługiwaną przeglądarką jest Chrome: developer.mozilla.org/en-US/docs/Web/CSS/ ...
Marco Bettiolo

to załatwiło sprawę dla chrome ... na szczęście w tym przypadku potrzebowałem tylko wsparcia wekkita ...
Davy

2
@DisgruntledGoat powinien zaktualizować to, aby było poprawną odpowiedzią, ponieważ szybko rozwiązało mój problem (mój projekt w pracy skupia się tylko na Chrome). To oczywiście nie działa dla wszystkich przeglądarek, ale powinno być to znane z góry, niezależnie od tego.
Brett84c

1
@ Brett84c: Nie zgadzam się, ponieważ jest to rozwiązanie tylko dla jednej przeglądarki.
Kukeltje

86

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*/
}

ya działa dobrze, ale Mozilla oznaczyła jako niestandardową. Ta funkcja jest niestandardowa i nie znajduje się na ścieżce standardowej. Nie używaj go w witrynach produkcyjnych skierowanych do sieci: nie będzie działać dla każdego użytkownika. Mogą również występować duże niezgodności między implementacjami, a zachowanie może ulec zmianie w przyszłości.
Qh0stM4N

3
Dlaczego jest to !importantkonieczne?

Pracował dla mnie! Dziękuję Ci.
Nick Woodhams,

color-adjustnie jest niestety poprawnie obsługiwany przez FireFox. Wydaje się, że dotyczy tylko tła, a nie colorwłaściwości css. Jest zgłaszany jako błąd , bez dużej aktywności lub głosów. Utrzymywanie tła jest zupełnie bezużyteczne, jeśli kolor czcionki nie jest zachowany, co powoduje, że jest nieczytelny.
Frédéric

To dobre rozwiązanie. Pamiętaj tylko, że nie działa z IE11 (wiem!).
Rafael S. Fijalkowski

76

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.


3
To było niesamowite rozwiązanie dla tego, co musiałem zrobić, czyli zamienić inline <img>(dla RWD) na inny dla @media print. Obraz internetowy był na ciemnym tle, więc drukowanie tego obrazu nie działało na białym papierze i nie chciałem zmuszać użytkowników do drukowania ciemnego tła w nagłówku. Idealny!
JHogue,

@JHogue - Dzięki! Cieszę się, że ci pomogło.
ckpepper02

4
Chociaż to nie jest „poprawna” odpowiedź. Jest o wiele bardziej pomocna niż zaakceptowana odpowiedź.
Xenology

poniżej odpowiedź stackoverflow.com/a/15208258/915865 powinna być zaznaczona, ponieważ ma lepsze wyjaśnienie, imho
Kat Lim Ruiz

1
W firefox to działa tylko wtedy, gdy stosowane zawartość wnętrza: zanim jak @ HANZ odpowiedzi
vaskort

18

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>

9

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

Używając tej metody, stworzyłem kilka prostych raportów „do wydruku” dla mojej firmy. Działa na OS X Chrome / Safari i Windows 8 Chrome / IE (nie próbowałem innych platform).
orzechy i piwo

3
Wygląda na to, że nie ma to wpływu na Chrome, Firefox i Safari na Macu.
intcreator

Właśnie tego potrzebowałem, aby zastosować atrybut do każdego użycia tego konkretnego elementu i pozwolić mi odpowiednio wydrukować dokument. Dzięki!
johnny

7

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


5

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.


1

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;  

}


warto wspomnieć, rozwiązałem mój problem razem z -webkit-print-color-adjust: dokładnie! ważne;
czmarc

0

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;

0

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.


To urocza poprawka, ale tak naprawdę nie działa, jeśli obraz tła jest znacznie większy niż kontener. (rozciąga się mój zawierający div)
Jabbamonkey

-1

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"/>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.