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

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?

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.

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

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

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.

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>

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

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

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.

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;  

}

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;

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.

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