Pertanyaan Bagaimana saya bisa memaksa browser untuk mencetak gambar latar belakang dalam CSS?


Pertanyaan ini ditanya sebelumnya tetapi solusinya tidak berlaku dalam kasus saya. Saya ingin memastikan bahwa gambar latar belakang tertentu dicetak karena merupakan bagian integral dari halaman. (Mereka bukan gambar langsung di halaman karena ada beberapa dari mereka yang digunakan sebagai CSS sprite.)

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

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


75
2017-07-12 19:48


asal


Jawaban:


Anda memiliki sangat sedikit kontrol atas metode pencetakan browser. Paling banyak Anda dapat MENYARANKAN, tetapi jika pengaturan cetak browser telah "tidak mencetak 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.


43
2017-07-12 19:51



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


166
2018-01-16 11:12



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 print ke ujung stylesheet Anda dan ubah sedikit latar belakang tubuhnya.

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 tubuh sebagai gambar "latar depan", sehingga membuatnya dapat dicetak. Anda mungkin perlu menambahkan beberapa CSS tambahan untuk membuat z-index layak. Tetapi sekali lagi, ini tergantung pada bagaimana halaman Anda ditata.

Ini bekerja untuk saya ketika saya tidak bisa mendapatkan gambar header muncul di tampilan cetak.


63
2017-09-26 23:25



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

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

26
2017-07-04 14:03



Kode di bawah 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>

8
2017-12-11 22:55



Seperti @ ckpepper02 mengatakan, konten isi: opsi url berfungsi dengan baik. Namun saya menemukan bahwa jika Anda memodifikasi sedikit Anda bisa menggunakannya untuk menambahkan gambar header macam menggunakan: sebelum elemen pseudo sebagai berikut.

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

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

-hanz


6
2017-11-26 15:44



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

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

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

6
2018-04-25 00:09



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

Satu kekurangannya adalah agar ini berfungsi di Chrome, Anda perlu menentukan perilaku ini di luar kueri media cetak Anda, dan membuatnya terlihat dalam blok permintaan 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 hanya dengan menggunakan gambar / jalur yang sama yang sudah Anda gunakan untuk gambar asli yang terlihat.


4
2018-03-04 18:18



itu berfungsi di google chrome saat 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;  

}


0
2017-09-19 07:23