CSS @media masalah cetak dengan warna latar belakang;

176

Saya baru di sini di perusahaan ini dan kami memiliki produk yang menggunakan bermil-mil css. Aku mencoba untuk membuat stylesheet dicetak untuk aplikasi kita tapi aku mengalami masalah dengan background-colordi @media print.

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

Segala sesuatu yang lain berfungsi, saya dapat mengubah batas dan semacamnya tetapi background-colortidak akan muncul di cetakan. Sekarang saya mengerti bahwa Anda mungkin tidak dapat menjawab pertanyaan saya tanpa rincian lebih lanjut. Saya hanya ingin tahu apakah ada yang punya masalah ini, atau yang serupa sebelumnya.

css media-queries

— Weston Watson
sumber

Yah, itu melewati W3C CSS-Validator ( jigsaw.w3.org/css-validator ). Itu aneh

— GôTô

Ini seharusnya tidak menjadi masalah lagi. Saya datang ke masalah ini karena saya punya halaman bootstrap dan bootstrap memiliki @media printpermintaan yang menghapus warna latar belakang dari tabel (misalnya garis-garis).

— Martin Thoma

@ MartinThoma Bagaimana Anda memperbaiki masalah? Apakah Anda menghapus CSS dari templated boostrap?

— EduLopez

242

JIKA pengguna mematikan "Warna dan gambar Latar Belakang Cetak" dalam pengaturan cetaknya, tidak ada CSS yang akan menimpanya, jadi selalu pertanggungjawabkan untuk itu. Ini adalah pengaturan default .

Setelah itu diatur sehingga akan mencetak warna dan gambar latar belakang, apa yang Anda miliki di sana akan berfungsi.

Itu ditemukan di tempat yang berbeda. Di IE9beta ditemukan di Print-> Page Options di bawah Paper options

Di FireFox ada di Page Setup -> Tab [Format & Opsi] di bawah Opsi.

— Ryan Ternier
sumber

10

hebat, Anda baru saja menyelamatkan saya berjam-jam memeras otak saya atas CSS ini.

— Weston Watson

162

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

— Marco Bettiolo

11

@MarcoBettiolo tampaknya tidak bekerja pada pembuatan webkit terbaru,! Namun penting

— Hedde van der Heide

2

Menambahkan! Penting untuk aturan memecahkannya untuk saya juga.

— Thiago Duarte

14

Untuk memperluas ini, saya menambahkan penyesuaian warna: tepat; agar FF bekerja. Jadi kode lengkap saya adalah*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

— BitBug

252

Untuk mengaktifkan pencetakan latar belakang di Chrome:

body {
  -webkit-print-color-adjust: exact !important;
}

— kebingungan
sumber

7

Ini tampaknya telah memecahkan masalah saya dengan mencetak tabel dengan warna baris alternatif.

— Victor J. Garcia

Pastikan Anda menggunakan casing yang benar untuk jalur gambar Anda karena dialog cetak Chrome tidak memuat gambar pada percobaan pertama. Ini hanya terjadi jika URL properti gambar latar belakang Anda tidak cocok dengan casing nama folder fisik. (Dilaporkan dalam versi 48.0.2564.109 m)

— MPaul

3

apa alternatif di firefox dan IE

— Shan Khan

5

Catatan untuk pelancong waktu mendatang: Anda mungkin ingin menggunakannya color-adjust.

— Константин Ван

@ КонстантинВан tidak didukung di Chrome pada April 2019. Ini adalah dokumentasi firefox.

— Thomas

82

Mengerti:

CSS:

box-shadow: inset 0 0 0 1000px gold;

Bekerja untuk semua kotak - termasuk sel tabel !!!

(Jika file output PDF-printer dapat dipercaya ..?)
Hanya diuji di Chrome + Firefox di Ubuntu ...

— T4NK3R
sumber

5

Anda dapat menambahkan dukungan IE8 dan IE9 dengan.

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */

Jika Anda ingin gambar sprite Anda terlihat, gunakan teknik img / clip css-tricks.com/css-sprites-with-inline-images , yang akan memberi Anda gambar dalam IE9 dan FF ( bukan IE8)

— emik

2

Berfungsi bagus di browser normal, tetapi tidak di IE, bahkan dengan saran dari @evami.

— woz

@woz Saya memilikinya berfungsi dalam proyek dengan IE8 / 9. Gradien (seperti bayangan kotak) menambahkan elemen latar belakang tambahan yang tidak dihilangkan oleh peramban paksa yang dipaksakan. maukah kamu berbagi css?

— emik

2

Ini sepertinya tidak bekerja dengan Chrome terbaru (60).

— swervo

1

Ini gagal untuk saya di Chrome. Saya menggunakan 69. Itu menunjukkan bahwa itu telah rusak setidaknya sejak 60 (sesuai komentar @ swervo).

— iconoclast

34

Coba ini, ini berhasil untuk saya di Google Chrome:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>

— MAXE
sumber

22

-webkit-print-color-adjust: exact; sendiriis Not enough Anda harus menggunakan !importantatribut tersebut

ini mencetak pratinjau pada chrome setelah saya tambahkan !importantke masing background-color- masing dan colorattrubute di setiap tag

dan ini mencetak pratinjau pada chrome sebelum menambahkan!important

sekarang, untuk mengetahui bagaimana cara inject !importantdiv gaya, lihat jawaban ini saya tidak dapat menyuntikkan gaya dengan aturan "! Penting"

— Basheer AL-MOMANI
sumber

Mungkin itu karena Anda sudah memiliki stylesheet @print yang mengatur ulang warna latar belakang.

— Niccolo M.

OH TUHAN! itu bekerja tetapi bagaimana ini bekerja? Tolong jelaskan.

— rahim.nagori

1

Itulah satu-satunya solusi yang bekerja untuk saya sejauh ini. <div style = "- webkit-print-color-menyesuaikan: tepat! penting; warna-latar belakang: merah! penting;"> ... </div>

— Thomas

10

Dua solusi yang berfungsi (setidaknya pada Chrome modern - belum diuji di luar):

! Hak penting dalam karya deklarasi css reguler (bahkan tidak pada cetak media @)
Gunakan svg

— yar1
sumber

6

! Penting memecahkan masalah di setiap peramban modern, selama "Cetak Warna dan Gambar Latar Belakang" diaktifkan.

— Chris Hynes

2

! Penting juga berfungsi tanpa campur tangan pengguna jika Anda menggunakannya bersama-sama dengan body {-webkit-print-color-adjust: exact; } (sesuai komentar di atas)

— yar1

2

Saya telah menemukan bahwa jika saya menggunakan color-adjustatau varian webkit saya sebenarnya tidak memerlukan aturan penting.

— Kasapo

7

Jika Anda ingin membuat halaman "ramah printer", saya sarankan untuk menambahkan "! Important" ke @media print CSS Anda. Ini mendorong sebagian besar browser untuk mencetak gambar latar belakang, warna, dll.

CONTOH:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

— kacang-n-bir
sumber

6

Ada trik lain yang dapat Anda lakukan tanpa mengaktifkan opsi batas cetak yang disebutkan dalam posting lain. Karena batas yang dicetak Anda dapat mensimulasikan padat background-warna dengan hack ini:

.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}

Aktifkan dengan menambahkan kelas ke elemen Anda:

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

Meskipun ini membutuhkan beberapa kode tambahan dan perhatian ekstra untuk membuat warna latar belakang terlihat, itu adalah satu-satunya solusi yang diketahui oleh saya.

Perhatikan peretasan ini tidak akan berfungsi pada elemen selain display: block;atau display: table-cell;, jadi misalnya <table class="your-background">dan <tr class="your-background">tidak akan berfungsi.

Kami menggunakan ini untuk mendapatkan warna latar belakang di semua browser (masih, IE9 + diperlukan).

— inti
sumber

1

ini adalah hack gila, tetapi setidaknya memaksa beberapa bentuk warna latar belakang terlepas dari pengaturan cetak. brilian, terima kasih.

— Brad Zacher

6

Untuk chrome, saya telah menggunakan sesuatu seperti ini dan itu berhasil untuk saya.

Di dalam tag tubuh,

<body style="-webkit-print-color-adjust: exact;"> </body>

Atau untuk elemen tertentu, katakanlah jika Anda memiliki tabel dan Anda ingin mengisi td yaitu sel,

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

— Aamir Shaikh
sumber

5

Meskipun !importantpenggunaan umumnya disukai, ini adalah kode yang mengganggu di bootstrap.cssmana mencegah baris tabel dicetak background-color.

.table td,
.table th {
    background-color: #fff !important;
}

Anggap Anda mencoba menata HTML berikut:

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

Untuk mengganti CSS ini, tempatkan aturan berikut (lebih spesifik) di stylesheet Anda:

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

Ini berfungsi karena aturannya lebih spesifik daripada standar bootstrap.

— Aelfinn
sumber

Setelah berjam-jam mencari, saya menemukan jawaban ini. Saya masuk dan menghilangkan garis-garis dari Bootstrap.css dan WHAM! Warna di latar belakang yang bisa dicetak!

— Mighty Ferengi

1

Terima kasih! Akhirnya, ini adalah jawaban yang membuat saya aktif dan berjalan tetapi saya perlu menambahkan: body {-webkit-print-color-sesuaikan: tepat! Penting; }

— Ocean Airdrop

3

Menemukan masalah ini, karena saya memiliki masalah serupa ketika mencoba menghasilkan PDF dari output html di Google Apps Script di mana warna latar juga tidak "dicetak".

The -webkit-print-color-adjust:exact;dan !importantsolusi tentu saja tidak bekerja, tapi box-shadow: inset 0 0 0 1000px gold;lakukan ... hack besar, terima kasih banyak :)

— logol
sumber

2

Saya pikir saya akan menambahkan bantuan relevan terbaru dan 2015 dari pengalaman css cetak baru-baru ini.

Mampu mencetak latar belakang dan warna terlepas dari pengaturan kotak dialog cetak.

Untuk melakukan ini, saya harus menggunakan kombinasi ! Important & -webkit-print-color-adjust: exact! Important untuk mendapatkan latar belakang dan warna untuk dicetak dengan benar.

Juga, ketika mendeklarasikan warna, saya menemukan area yang paling bandel membutuhkan definisi langsung ke target Anda. Sebagai contoh:

<div class="foo">
 <p class="red">Some text</p>
</div>

Dan CSS Anda:

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */

— Jonathan
sumber

2

Diuji dan Bekerja Chrome, Firefox, Opera dan Edge pada 2016/10. Harus berfungsi di browser apa pun dan harus selalu terlihat seperti yang diharapkan.

Ok, saya melakukan percobaan lintas-browser kecil untuk mencetak warna latar belakang. Cukup salin, tempel & nikmati!

Ini dia halaman HTML yang bisa dicetak penuh untuk bootstrap:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>

— Heroselohim
sumber

1

"Solusi" terbaik yang saya temukan adalah menyediakan tombol atau tautan "Cetak" yang menonjol yang memunculkan kotak dialog kecil yang menjelaskan dengan berani, singkat dan singkat bahwa mereka perlu menyesuaikan pengaturan printer (dengan instruksi titik peluru ABC 123) untuk mengaktifkan latar belakang dan pencetakan gambar. Ini sangat sukses bagi saya.

— alano
sumber

1

Dalam beberapa kasus (blok tanpa konten apa pun, tetapi dengan latar belakang) dapat ditimpa menggunakan batas, secara individual untuk setiap blok.

Sebagai contoh:

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

— Gedeon
sumber

0

Anda dapat menggunakan tag canvasdan "menggambar" latar belakang, yang berfungsi pada IE9, Gecko dan Webkit.

— Thomas Lecavelier
sumber

0

Jika Anda tidak keberatan menggunakan gambar alih-alih warna latar belakang (atau mungkin gambar dengan warna latar belakang Anda) solusi di bawah ini berhasil bagi saya di FireFox, Chrome, dan bahkan IE tanpa wahana tambahan. Atur gambar di suatu tempat di halaman dan sembunyikan sampai pengguna mencetak.

Html pada halaman dengan gambar latar belakang

<img src="someImage.png" class="background-print-img">

Css

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}

— ksealey
sumber

Saya mengambil pendekatan Anda dan mencoba membuatnya bekerja di IE11, tetapi sayangnya itu tidak berhasil. Itu sampai saya memberi !importantnilai pada setiap atribut di kelas saya yang kemudian membuatnya berfungsi.

— Sal Alturaigi

0

Jangan tidak mengaturbackground-color dalam stylesheet cetak. Cukup atur atribut dalam file css normal dan berfungsi dengan baik :)

Lihat contoh ini: Template HTML Cetak Utama dengan Header & Footer

Demo: Template HTML Cetak Utama dengan Demo Header & Footer

— Dryden Williams
sumber

0

tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

Bekerja di Chrome dan Edge

— Ivanov dengan mudah
sumber