Bagaimana cara memaksa browser untuk mencetak gambar latar belakang dalam CSS?


102

Pertanyaan ini telah ditanyakan sebelumnya tetapi solusinya tidak dapat diterapkan dalam kasus saya. Saya ingin memastikan gambar latar belakang tertentu dicetak karena merupakan bagian integral dari halaman. (Ini bukan gambar langsung di halaman karena ada beberapa di antaranya yang digunakan sebagai sprite CSS.)

Solusi lain untuk pertanyaan yang sama menyarankan penggunaan list-style-image, yang hanya berfungsi jika Anda memiliki gambar berbeda untuk setiap ikon, sprite CSS tidak memungkinkan.

Selain membuat halaman terpisah dengan ikon sejajar, apakah ada solusi lain?

Jawaban:


51

Anda memiliki sedikit kendali atas metode pencetakan browser. Paling banyak Anda dapat SUGGEST, tetapi jika setelan cetak browser memiliki "jangan cetak gambar latar belakang", tidak ada yang dapat Anda lakukan tanpa menulis ulang halaman Anda untuk mengubah gambar latar belakang menjadi gambar "latar depan" mengambang yang kebetulan berada di belakang konten lain.


210

Dengan Chrome dan Safari Anda dapat menambahkan gaya CSS -webkit-print-color-adjust: exact;ke elemen untuk mencetak paksa warna latar belakang dan / atau gambar


4
Ini luar biasa. Membuat hidup lebih mudah bagi pengguna / webkit phantomjs
Jason

1
@MuneemHabib Tidak berfungsi di IE, sebenarnya, satu-satunya browser yang didukung adalah Chrome: developer.mozilla.org/en-US/docs/Web/CSS/…
Marco Bettiolo

itu melakukan trik untuk chrome ... untungnya dalam hal ini saya hanya perlu mendukung wekkit ...
Davy

2
@DisgruntledGoat harus memperbarui ini menjadi jawaban yang benar karena dengan cepat menyelesaikan masalah saya (proyek saya di tempat kerja hanya berfokus pada Chrome). Ini jelas tidak berfungsi untuk semua browser tetapi harus diketahui, di depan, apa pun.
Brett84c

1
@ Brett84c: Saya tidak setuju karena ini adalah solusi satu-satunya browser.
Kukeltje

84

Browser, secara default, memiliki opsi untuk mencetak warna latar belakang dan gambar dimatikan. Anda dapat menambahkan beberapa baris di CSS untuk melewati ini. Tambahkan saja:

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

ya berfungsi dengan baik tetapi tandai mozilla sebagai non-standar Fitur ini tidak standar dan tidak berada di trek standar. Jangan gunakan di situs produksi yang menghadap ke Web: ini tidak akan berfungsi untuk setiap pengguna. Mungkin juga ada ketidakcocokan yang besar antara penerapan dan perilaku dapat berubah di masa mendatang.
Qh0stM4N

3
Mengapa !importantperlu?

Bekerja untuk saya! Terima kasih.
Nick Woodhams

color-adjustsayangnya tidak didukung dengan benar oleh FireFox. Tampaknya hanya berlaku untuk latar belakang, bukan untuk colorproperti css. Ini dilaporkan sebagai bug , tanpa banyak aktivitas atau suara. Mempertahankan latar belakang tidak berguna jika warna font tidak dipertahankan, menyebabkannya tidak dapat dibaca.
Frédéric

Itu solusi yang bagus. Hanya perlu diingat bahwa ini tidak berfungsi dengan IE11 (saya tahu!).
Rafael S. Fijalkowski

76

Saya menemukan cara untuk mencetak gambar latar belakang dengan CSS. Ini sedikit tergantung pada bagaimana latar belakang Anda ditata, tetapi tampaknya berfungsi untuk aplikasi saya.

Pada dasarnya, Anda menambahkan @media printujung stylesheet Anda dan mengubah sedikit latar belakang tubuh.

Contoh, jika CSS Anda saat ini terlihat seperti ini:

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

Di akhir stylesheet Anda, Anda menambahkan:

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

Ini menambahkan gambar ke badan sebagai gambar "latar depan", sehingga membuatnya dapat dicetak. Anda mungkin perlu menambahkan beberapa CSS tambahan untuk membuat yang z-indexbenar. Tapi sekali lagi, terserah bagaimana halaman Anda ditata.

Ini bekerja untuk saya ketika saya tidak bisa menampilkan gambar header dalam tampilan cetak.


3
Ini adalah solusi luar biasa untuk apa yang perlu saya lakukan, yaitu mengganti inline <img>(untuk RWD) dengan yang berbeda @media print. Gambar web berada di latar belakang gelap, jadi mencetak gambar itu tidak berfungsi di kertas putih, dan saya tidak ingin memaksa pengguna untuk mencetak latar belakang gelap di header. Sempurna!
JHogue

@JHogue - Terima kasih! Senang itu membantu Anda.
ckpepper02

4
Meskipun ini bukan jawaban yang "benar". JAUH lebih membantu daripada jawaban yang diterima.
Xenologi

di bawah jawaban stackoverflow.com/a/15208258/915865 harus ditandai karena memiliki penjelasan yang lebih baik, imho
Kat Lim Ruiz

1
Di firefox ini bekerja hanya jika Anda menggunakan konten di dalam: sebelum seperti @ hanz answer
vaskort

18

Kode di bawah ini berfungsi dengan baik untuk saya (setidaknya untuk Chrome).

Saya juga menambahkan beberapa kontrol margin dan orientasi halaman. (Potret, lanskap)

<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

Pastikan untuk menggunakan atribut! Important. Ini secara dramatis meningkatkan kemungkinan gaya Anda dipertahankan saat dicetak.

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

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

Saya membuat beberapa laporan "ramah printer" sederhana untuk perusahaan saya menggunakan metode ini. Ini berfungsi di OS X Chrome / Safari dan Windows 8 Chrome / IE (belum mencoba platform lain).
kacang-n-bir

3
Ini tampaknya tidak berpengaruh pada Chrome, Firefox, dan Safari di Mac.
intcreator

Inilah yang saya butuhkan untuk menerapkan atribut ke setiap penggunaan elemen tertentu dan biarkan saya mencetak dokumen dengan tepat. Terima kasih!
johnny

7

Seperti yang dikatakan @ ckpepper02, opsi isi tubuh: url berfungsi dengan baik. Namun saya menemukan bahwa jika Anda memodifikasinya sedikit, Anda dapat menggunakannya untuk menambahkan semacam gambar header menggunakan elemen pseudo: before sebagai berikut.

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

Itu akan menyelipkan gambar di bagian atas halaman, dan dari pengujian terbatas saya, itu berfungsi di Chrome dan IE9

-hanz


5

Gunakan elemen psuedo. Meskipun banyak browser akan mengabaikan gambar latar belakang, elemen psuedo dengan kontennya yang disetel ke gambar secara teknis BUKAN gambar latar belakang. Anda kemudian dapat memposisikan gambar latar belakang secara kasar di tempat gambar seharusnya berada (meskipun tidak semudah atau setepat gambar aslinya).

Salah satu kekurangannya adalah agar ini berfungsi di Chrome, Anda perlu menentukan perilaku ini di luar kueri media cetak Anda, lalu membuatnya terlihat di blok kueri media cetak. Jadi, sesuatu seperti ini ...

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

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

Kekurangannya adalah bahwa gambar akan sering diunduh pada pemuatan halaman normal, menambahkan massal yang tidak perlu. Anda dapat menghindarinya dengan hanya menggunakan gambar / jalur yang sama yang telah Anda gunakan untuk gambar asli yang terlihat.


1

ini berfungsi di google chrome ketika Anda menambahkan! atribut penting ke gambar latar belakang pastikan Anda menambahkan atribut terlebih dahulu dan coba lagi, Anda dapat melakukannya seperti itu

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

}


poin yang bagus untuk disebutkan, menyelesaikan masalah saya bersama-sama dengan -webkit-print-color-adjust: tepat! penting;
czmarc

0

Anda dapat menggunakan batas untuk warna tetap.

 borderTop: solid 15px black;

dan untuk latar belakang gradien Anda dapat menggunakan:

    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 mengusulkan solusi elegan, menggunakan poin khusus sebagai pengganti gambar latar belakang:

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

Dengan memasukkan ini dalam a

@media print {
}

blokir, saya dapat mengganti logo putih di transparan di layar, yang ditampilkan sebagai gambar latar belakang, dengan logo hitam di transparan untuk dicetak.


Ini adalah perbaikan yang lucu, tetapi tidak benar-benar berfungsi jika gambar latar belakang jauh lebih besar dari wadahnya. (itu membentangkan div saya yang berisi)
Jabbamonkey

-1

Anda bisa melakukan beberapa trik seperti itu:

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

Di tag tubuh:

<img src="YOUR IMAGE URL" class="whater"/>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.