Arka plan rengiyle CSS @ medya yazdırma sorunları;

176

Bu şirkette yeniyim ve kilometrelerce css kullanan bir ürünümüz var. Bizim uygulaması için yazdırılabilir stil yapmak çalışılıyor ama sorun yaşıyorum background-coloriçinde @media print.

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

Diğer her şey işe yarıyor, sınırları değiştirebilirim ve böyle ama background-colorbaskıda gelmeyecek. Şimdi, daha fazla ayrıntı olmadan sorumu cevaplayamayacağınızı anlıyorum. Daha önce bu sorunu veya benzeri bir şey olup olmadığını merak ettim.

css media-queries

— Weston Watson
kaynak

Peki, W3C CSS-Doğrulayıcı'yı ( jigsaw.w3.org/css-validator ) geçer. Bu tuhaf

— GôTô

Bu artık bir sorun olmamalı. Bir bootstrap sayfası vardı ve bootstrap @media printtablolardan (örn. Şeritler) arka plan renklerini kaldıran bir sorgu var çünkü bu soruna geldim .

— Martin Thoma

@MartinThoma Sorunu nasıl çözdünüz? CSS şablonlu boostrap'tan çıkardınız mı?

— EduLopez

242

Bir kullanıcının yazdırma ayarlarında "Arka Plan renklerini ve resimlerini yazdır" özelliği devre dışı bırakılmışsa, hiçbir CSS bunu geçersiz kılmaz, bu nedenle bunu daima hesaba katın. Bu varsayılan bir ayardır .

Arka plan renkleri ve görüntüleri basacak şekilde ayarlandığında, sahip olduklarınız işe yarayacaktır.

Farklı noktalarda bulunur. IE9beta'da Kağıt seçenekleri altındaki Yazdır-> Sayfa Seçenekleri'nde bulunur

FireFox'ta, Seçenekler altındaki Sayfa Yapısı -> [Biçim ve Seçenekler] Sekmesinde bulunur.

— Ryan Ternier
kaynak

10

harika, bana bu CSS üzerinde saatler süren beynimi kurtardın.

— Weston Watson

162

Chrome ve Safari ile "-webkit-print-colour-adjust: exact;" css stilini ekleyebilirsiniz. plan rengini ve / veya resmi

— basmaya zorlayan elemana

11

@MarcoBettiolo en son webkit yapılarında çalışmıyor gibi görünüyor! Ancak önemli

— Hedde van der Heide

2

Kural için önemli olanı eklemek de benim için çözdü.

— Thiago Duarte

14

Bunu genişletmek için, renk ayarı ekledim: exact; FF'nin çalışması için. Yani tam kodum*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

— BitBug

252

Chrome'da arka plan yazdırmayı etkinleştirmek için:

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

— drolex
kaynak

7

Bu, alternatif satır renklerine sahip bir tablo yazdırmayla ilgili sorunumu çözmüş görünüyor.

— Victor J. Garcia

Chrome'un yazdırma iletişim kutusu görüntüleri ilk denemede yüklemediğinden, görüntü yolunuz için doğru kasayı kullandığınızdan emin olun. Bu yalnızca arka plan resmi mülkünüzün URL'sinin fiziksel klasörün adının büyük / küçük harfleriyle eşleşmemesi durumunda olur. (48.0.2564.109 m sürümünde bildirilmiştir)

— MPaul

3

firefox ve IE'de alternatif nedir

— Shan Khan

5

Gelecekteki seyahat edenler için bir not: color-adjustbunun yerine kullanmak isteyebilirsiniz .

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

@ КонстантинВан Nisan 2019 itibariyle Chrome'da desteklenmemektedir. Bu, firefox dokümanlarıdır.

— Thomas

83

Anladım:

CSS:

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

Tüm hücreler için çalışır - tablo hücreleri dahil !!!

(PDF yazıcı çıktı dosyasına inanılacaksa ..?)
Yalnızca Ubuntu'da Chrome + Firefox'ta test edildi ...

— T4NK3R
kaynak

5

IE8 ve IE9 desteğini ekleyebilirsiniz

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

Sprite görüntülerinizin görünmesini istiyorsanız, IE9 ve FF'de size görüntü verecek img / clip tekniği css-tricks.com/css-sprites-with-inline-images'i kullanın ( IE8 değil)

— emik

2

@Evami'nin önerisiyle bile normal tarayıcılarda harika çalışır, ancak IE'de çalışmaz.

— woz

@woz IE8 / 9 ile bir projede çalışıyor. Degrade (tıpkı kutu gölgesi gibi), zorunlu tarayıcı sıfırlamasıyla ortadan kaldırılmayan fazladan bir arka plan öğesi ekler. css'inizi paylaşmak ister misiniz?

— emik

2

Bu, en son Chrome (60) ile çalışmıyor gibi görünüyor.

— swervo

1

Bu benim için Chrome'da başarısız oluyor. Ben 69 kullanıyorum. Bu en azından 60 (@ swervo yorumuna göre) kırık olduğunu göstermektedir .

— iconoclast

34

Bunu deneyin, Google Chrome'da benim için çalıştı:

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

— MAXE
kaynak

22

-webkit-print-color-adjust: exact; yalnızis Not enough!important bu özellik ile kullanmak zorunda

Bu chrome önizleme yazdırıyor sonra ekledim !importanther birine background-colorve colorher etiketinde attrubute

ve bu, eklemeden önce kromun önizlemesini yazdırıyor!important

şimdi, inject !importantdiv'ın tarzını nasıl yapacağınızı bilmek için , bu cevaba göz atın “! önemli” kuralıyla bir stil enjekte edemiyorum

— Basheer AL-MOMANI
kaynak

Belki de zaten arka plan rengini sıfırlayan bir @print stil sayfanız var.

— Niccolo

AMAN TANRIM! çalışıyor ama bu nasıl çalışıyor? Açıklayabilir misin.

— rahim.nagori

1

Benim için şimdiye kadar işe yarayan tek çözüm bu. <div style = "- webkit-print-color-adjust: tam! önemli; arka plan rengi: kırmızı! önemli;"> ... </div>

— Thomas

10

Çalışan iki çözüm (en azından modern Chrome'da - ötesinde test edilmemiştir):

! düzenli css deklarasyon çalışmalarında önemli bir hak (@media baskısında bile değil)
Svg kullan

— yar1
kaynak

6

! "Arka Plan Renklerini ve Resimleri Yazdır" etkin olduğu sürece her modern tarayıcıda sorunu çözer.

— Chris Hynes

2

! important ayrıca, gövdeyle birlikte kullanırsanız kullanıcı müdahalesi olmadan da çalışır {-webkit-print-colour-adjust: exact; } (yukarıdaki yoruma göre)

— yar1

2

Eğer kullandığımda color-adjustveya webkit varyantında aslında önemli kurala ihtiyaç duymadığımı fark ettim.

— Kasapo

7

"Yazıcı dostu" sayfalar oluşturmak istiyorsanız, @media print CSS'nize "! İmportant" eklemenizi tavsiye ederim. Bu, çoğu tarayıcıyı arka plan resimlerinizi, renklerinizi vb. Yazdırmaya teşvik eder.

ÖRNEKLER:

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

— fındık-n-bira
kaynak

6

Yapabileceğiniz başka bir hile vardır olmadan diğer mesajlar belirtildiği baskı sınır seçeneğini aktive. Sınırlar yana olan basılı eğer bu kesmek katı background-renkleri simüle edebilirsiniz:

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

Sınıfı öğenize ekleyerek etkinleştirin:

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

Bu, arka plan renklerini görünür kılmak için biraz ekstra kod ve biraz özen gerektirse de, henüz bildiğim tek çözüm.

Bu saldırının display: block;veya dışındaki öğeler üzerinde çalışmadığına dikkat edin display: table-cell;, örneğin <table class="your-background">ve<tr class="your-background"> çalışmadığına dikkat edin.

Bunu tüm tarayıcılarda arka plan renkleri elde etmek için kullanırız (yine de IE9 + gerekir).

— çekirdek
kaynak

1

bu çılgın bir hack, ama en azından yazdırma ayarlarından bağımsız olarak bir arka plan rengi zorlar. parlak, teşekkürler.

— Brad Zacher

6

Krom için böyle bir şey kullandım ve benim için çalıştı.

Gövde etiketi içinde,

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

Veya belirli bir eleman için, tablonuz varsa ve bir td'yi yani bir hücreyi doldurmak istiyorsanız,

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

— Aamir Shaikh
kaynak

5

!importantKullanım genel olarak kaşlarını çatmış olmasına rağmen , bu, bootstrap.csstablo satırlarının yazdırılmasını engelleyen rahatsız edici koddur background-color.

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

Aşağıdaki HTML'yi biçemeye çalıştığınızı varsayalım:

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

Bu CSS'yi geçersiz kılmak için stil sayfanıza aşağıdaki (daha spesifik) kuralı yerleştirin:

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

Kural, bootstrap varsayılanından daha spesifik olduğu için bu çalışır.

— Aelfinn
kaynak

Saatlerce arama yaptıktan sonra bu cevabı buldum. İçeri girdim ve Bootstrap.css ve WHAM'den satırları kaldırdım! Yazdırılabilir arka planda renkler!

— Mighty Ferengi

1

Teşekkür ederim! Sonunda, bu beni çalıştırıp çalıştıran cevaptır ama eklemem gerekiyor: body {-webkit-print-colour-adjust: exact! İmportant; }

— Ocean Airdrop

3

Arka plan renklerinin de "yazdırılmadığı" Google Apps Script'te bir html çıktısından PDF oluşturmaya çalışırken benzer bir sorun yaşadığım için bu sorunu buldum.

-webkit-print-color-adjust:exact;Ve !importanttabii ki çözüm eser yoktu, ama box-shadow: inset 0 0 0 1000px gold;did ... Büyük kesmek, çok teşekkür ederim :)

— logol
kaynak

2

Son bir baskı css deneyiminden yeni ve 2015 ile ilgili bir yardım ekleyeceğimi düşündüm.

Yazdırma iletişim kutusu ayarlarına bakılmaksızın arka plan ve renkleri basabildi.

Bunu yapmak için, ben bir arada kullanmak zorunda kaldı ! Önemli & renkli -webkit-baskı-ayarlayın:! Önemli kesin düzgün yazdırmak için arka plan ve renkleri elde etmek.

Ayrıca, renkleri bildirirken, en inatçı alanların doğrudan hedefinize bir tanımlamaya ihtiyacı olduğunu buldum. Örneğin:

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

Ve CSS'niz:

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

— Jonathan
kaynak

2

Test ve Çalışma2016/10 tarihine kadar Chrome, Firefox, Opera ve Edge üzerinde çalışılmıştır. Herhangi bir tarayıcıda çalışmalı ve her zaman beklendiği gibi görünmelidir.

Tamam, arka plan renkleri yazdırmak için küçük bir çapraz tarayıcı denemesi yaptım. Sadece kopyalayın, yapıştırın ve tadını çıkarın!

İşte bootstrap için yazdırılabilir tam bir HTML sayfası:

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

1

Bulduğum en iyi "çözüm", arka planı etkinleştirmek için yazıcı ayarlarını (ABC 123 madde işaretli talimatla) ayarlamaları gerektiğini, cesurca, kısaca ve kısaca açıklayan küçük bir iletişim kutusu açan önemli bir "Yazdır" düğmesi veya bağlantısı sağlamaktır. ve görüntü baskısı. Bu benim için çok başarılı oldu.

— alano
kaynak

1

Bazı durumlarda (içeriği olmayan, ancak arka planı olan bloklar), her blok için ayrı ayrı kenarlıklar kullanılarak geçersiz kılınabilir.

Örneğin:

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

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

— Gedeon
kaynak

0

Etiketini kullanabilirsiniz canvasIE9, Gecko ve Webkit üzerinde çalışan ve arka planı "çizebilirsiniz".

— Thomas Lecavelier
kaynak

0

Arka plan rengi (veya muhtemelen arka plan renginize sahip bir görüntü) yerine bir görüntü kullanmakta sakıncası yoksa aşağıdaki çözüm, FireFox, Chrome ve hatta IE'de fazla sürüş yapmadan çalıştı. Görüntüyü sayfada bir yere yerleştirin ve kullanıcı yazdırıncaya kadar gizleyin.

Arka plan resmiyle sayfadaki html

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

Yaklaşımınızı aldım ve IE11 üzerinde çalışmaya başladım, ama ne yazık ki işe yaramadı. Sınıfımdaki !importanther bir özniteliğe bir değer koyana kadar bu işe yaradı.

— Sal Alturaigi

0

Do not set background-colorbaskı stil sayfası içinde. Sadece normal css dosyasında özniteliği ayarlayın ve iyi çalışıyor :)

Bu örneği inceleyin: Üstbilgi ve Altbilgiye Sahip Ultimate Print HTML Şablonu

Demo: Üstbilgi ve Altbilgi Demosu ile Ultimate Print HTML Şablonu

— Dryden Williams
kaynak

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>

Chrome ve Edge'de çalışır

— Vasily Ivanov
kaynak