Baskı önizlemesinde arka plan rengi gösterilmiyor

Bir sayfa yazdırmaya çalışıyorum. Bu sayfada bir tabloya arka plan rengi verdim. Chrome'da baskı önizlemesini görüntülediğimde arka plan rengi özelliğini almıyor ...

Bu özelliği denedim:

-webkit-print-color-adjust: exact; 

ama yine de rengi göstermiyor.

http://jsfiddle.net/TbrtD/

.vendorListHeading {
  background-color: #1a4567;
  color: white;
  -webkit-print-color-adjust: exact; 
}


<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
  <table class="table" style="margin-bottom: 0px;">
    <thead>
      <tr class="vendorListHeading" style="">
        <th>Date</th>
        <th>PO Number</th>
        <th>Term</th>
        <th>Tax</th>
        <th>Quote Number</th>
        <th>Status</th>
        <th>Account Mgr</th>
        <th>Shipping Method</th>
        <th>Shipping Account</th>
        <th style="width: 184px;">QA</th>
        <th id="referenceSO">Reference</th>
        <th id="referenceSO" style="width: 146px;">End-User Name</th>
        <th id="referenceSO" style="width: 118px;">End-User's PO</th>
        <th id="referenceSO" style="width: 148px;">Tracking Number</th>
      </tr>
    </thead>
    <tbody>
      <tr class="">
        <td>22</td>
        <td>20130000</td>
        <td>Jim B.</td>
        <td>22</td>
        <td>510 xxx yyyy</td>
        <td>zznn@abc.co</td>
        <td>PDF</td>
        <td>12/23/2012</td>
        <td>Approved</td>
        <td>PDF</td>
        <td id="referenceSO">12/23/2012</td>
        <td id="referenceSO">Approved</td>
      </tr>
    </tbody>
  </table>
</div>

Chrome CSS özelliği -webkit-print-color-adjust: exact;uygun şekilde çalışıyor.

Bununla birlikte, yazdırma için doğru CSS'ye sahip olduğunuzdan emin olmak genellikle zor olabilir. Yaşadığınız zorluklardan kaçınmak için birkaç şey yapılabilir. İlk olarak, tüm yazdırma CSS'nizi ekran CSS'nizden ayırın. Bu,@media print ve @media screen.

Çoğu zaman sadece bazı ekstra ayarlar @media print CSS yeterli değildir, çünkü baskı sırasında diğer tüm CSS'leriniz de dahil edilmiştir. Bu durumlarda, yazdırma kuralları yazdırılmayan CSS kurallarına göre otomatik olarak kazanmadığından, CSS özgüllüğünün farkında olmanız yeterlidir.

Sizin durumunuzda, -webkit-print-color-adjust: exact çalışıyor. Ancak,background-color ve renk tanımlarınız daha yüksek özgüllüğe sahip diğer CSS'ler tarafından yeniliyor.

Ben ise yok endorse kullanarak !importanthemen hemen her durum içinde, aşağıdaki tanımlar düzgün çalışması ve sorunu ortaya:

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        -webkit-print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

İşte keman (ve baskı önizleme kolaylığı için gömülü ).

Bu CSS özelliği ihtiyacım olan tek şey benim için çalışıyor ... Chrome'da önizlerken BW ve Renkli ( Renk: Seçenekler- Renkli veya Siyah beyaz) görme seçeneğiniz var ) nedenle bu seçeneğe sahip değilseniz, Bu Chrome uzantısını almanızı ve hayatınızı kolaylaştırmanızı öneririm:

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en

Keman eklediğiniz site medya baskı css buna ihtiyacı var (sadece eklemeniz gerekir ...

vücutta medya baskı CSS:

@media print {
body {-webkit-print-color-adjust: exact;}
}

GÜNCELLEME Tamam, böylece sorununuz bootstrap.css ... sizin yaptığınız gibi bir medya baskı css var .... bunu kaldırın ve bu size renk vermelidir .... ya kendi yapmak ya da sopa gerekir bootstraps baskı css.

Bunun üzerine yazdır'ı tıkladığımda renk görüyorum .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Arka plan grafik ayarı kapalıysa, Chrome yazdırırken arka plan rengini veya diğer birkaç stili oluşturmaz.

Bunun css, @media veya spesifisite ile ilgisi yoktur. Muhtemelen etrafta yolunuzu kesebilirsiniz, ancak arka plan rengini ve diğer grafikleri göstermek için krom almanın en kolay yolu Diğer Ayarlar altındaki bu onay kutusunu düzgün bir şekilde işaretlemektir.

Ben sadece göstermek için !importantözniteliği arka plan renk etiketine eklemek gerekiyordu, webkit bölümüne gerek yoktu:

background-color: #f5f5f5 !important;

Önyükleme veya başka bir 3. taraf CSS kullanıyorsanız, medya ekranını yalnızca üzerinde belirttiğinizden emin olun, böylece kendi CSS dosyalarınızdaki yazdırma medyası türünün kontrolünü elinize alın:

<link rel="stylesheet" media="screen" href="">

CSS'niz şöyle olmalıdır:

@media print {
   body {
      -webkit-print-color-adjust: exact;
   }
}

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;   
}

BU BOOTSTRAP.CSS KULLANMAK İÇİN, bu düzeltme!

Tüm çözümleri denedim ve çalışmıyorlardı ... bootstrap.css'in @media printtüm renklerinizi, arka plan renklerinizi, gölgelerinizi vb. Sıfırlayan süper sinir bozucu olduğunu keşfetinceye kadar ...

@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}

Bu yüzden ya bu bölümü bootstrap.css'den (veya bootstrap.min.css) kaldırın

Veya kendi değerlerinizde yazdırmak istediğiniz sayfanın css'sinde bu değerleri geçersiz kılın @media print

@media print {
  body { 
    -webkit-print-color-adjust: exact; 
  }
  .customClass{
     //customCss + !important;
  }
  //more of your custom css
}

@media printStil sayfanızda aşağıdakileri kullanın .

h1 {
    background-color:#404040;
    background-image:url("img/404040.png");
    background-repeat:repeat;
    box-shadow: inset 0 0 0 1000px #404040;
    border:30px solid #404040;
    height:0;
    width:100%;
    color:#FFFFFF !important;
    margin:0 -20px;
    line-height:0px;
}

İşte dikkat etmeniz gereken birkaç nokta:

• background-color mutlak bir geri dönüştür ve çoğunlukla gelecek nesiller için vardır.
• arka plan resmi, PNG biçiminde oluşturulan # 404040 boyutunda 1 piksel x 1 piksel piksel kullanır. Kullanıcının resimleri etkinleştirilmişse işe yarayabilir, değilse ...
• Kutu gölgesini ayarlayın, eğer işe yaramazsa ...
• Kenarlık = istediğiniz yükseklik ve / veya kutunun genişliğinin 1/2 katı, renkli. Yukarıdaki örnekte 60 piksel yüksekliğinde bir kutu istedim.
• Kenarlık özniteliğinde neyi kontrol ettiğinize bağlı olarak yüksekliği / genişliği sıfırlayın.
• Önemli olmadıkça yazı tipi rengi varsayılan olarak siyaha döner.
• Fiziksel boyutu olmayan kutuyu düzeltmek için satır yüksekliğini 0 olarak ayarlayın.
• Kendi PNG'lerinizi oluşturun ve barındırın :-)
• Bloktaki metnin sarılması gerekiyorsa, bir div öğesine yerleştirin ve div konumunu şu konuma göre konumlandırın: relative; ve satır yüksekliğini kaldırın.

Daha ayrıntılı bir gösteri için kemanımı görün .

Bunun bir css sorunu olduğundan emin misiniz? Google'da bu sorunla ilgili bazı yayınlar var: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Yazdırma işlemi ile ilgili olabilir. Webkit olan safari'de, yazıcı iletişim kutusunda arka plan resimleri ve renkleri yazdırmak için bir onay kutusu bulunur.

IE için

IE kullanıyorsanız baskı önizlemesine gidin (belgeye sağ tıklayın -> baskı önizleme), ayarlara gidin ve "arka plan rengini ve resimlerini yazdır" seçeneği vardır, bu seçeneği seçin ve deneyin.

@Media print {* ,: after,: before ....} altındaki bootstrap css dosyalarında, herhangi bir öğedeki arka plan renklerini kaldıran! Önemli olarak etiketlenmiş, renk ve arka plan stilleri olan bir stil var. Bu iki css parçasını öldürün ve işe yarayacak.

Bootstrap, baskılarda asla arka plan rengine sahip olmamanız gerektiğine dair yürütme kararı veriyor , bu yüzden css'lerini düzenlemeniz veya daha yüksek bir öncelik olan başka bir! İyi iş bootstrap ...

Purgatory101'in yanıtını kullandım, ancak özellikle CSS stil sayfalarının DOM öğesinin renklerini dinamik olarak değiştiren kitaplıklarla kullanılamaması nedeniyle tüm renkleri (simgeler, arka planlar, metin renkleri vb ...) tutmakta sorun yaşadım . Bu nedenle, yazdırmadan önce öğenin stillerini ( background-colourve colour) değiştiren ve yazdırma tamamlandıktan sonra stilleri temizleyen bir komut dosyasıdır . @media printSayfa yapısı ne olursa olsun bir stil sayfasına çok fazla CSS yazmaktan kaçınmak yararlıdır .

Komut dosyasının, FontAwesome simgelerinin rengini (veya :beforerenkli içerik eklemek için seçici kullanan herhangi bir öğeyi) tutmak için özel olarak yapılmış bir kısmı vardır .

Script eylem gösteren JSFiddle

Uyumluluk: Chrome'da çalışır, diğer tarayıcıları test etmedim.

function setColors(selector) {
  var elements = $(selector);
  for (var i = 0; i < elements.length; i++) {
    var eltBackground = $(elements[i]).css('background-color');
    var eltColor = $(elements[i]).css('color');

    var elementStyle = elements[i].style;
    if (eltBackground) {
      elementStyle.oldBackgroundColor = {
        value: elementStyle.backgroundColor,
        importance: elementStyle.getPropertyPriority('background-color'),
      };
      elementStyle.setProperty('background-color', eltBackground, 'important');
    }
    if (eltColor) {
      elementStyle.oldColor = {
        value: elementStyle.color,
        importance: elementStyle.getPropertyPriority('color'),
      };
      elementStyle.setProperty('color', eltColor, 'important');
    }
  }
}

function resetColors(selector) {
  var elements = $(selector);
  for (var i = 0; i < elements.length; i++) {
    var elementStyle = elements[i].style;

    if (elementStyle.oldBackgroundColor) {
      elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance);
      delete elementStyle.oldBackgroundColor;
    } else {
      elementStyle.setProperty('background-color', '', '');
    }
    if (elementStyle.oldColor) {
      elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance);
      delete elementStyle.oldColor;
    } else {
      elementStyle.setProperty('color', '', '');
    }
  }
}

function setIconColors(icons) {
  var css = '';
  $(icons).each(function (k, elt) {
    var selector = $(elt)
      .parents()
      .map(function () { return this.tagName; })
      .get()
      .reverse()
      .concat([this.nodeName])
      .join('>');

    var id = $(elt).attr('id');
    if (id) {
      selector += '#' + id;
    }

    var classNames = $(elt).attr('class');
    if (classNames) {
      selector += '.' + $.trim(classNames).replace(/\s/gi, '.');
    }

    css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }';
  });
  $('head').append('<style id="print-icons-style">' + css + '</style>');
}

function resetIconColors() {
  $('#print-icons-style').remove();
}

Ardından window.print, stilleri yazdırmadan ve sıfırlamadan önce stilleri ayarlaması için değiştirin .

window._originalPrint = window.print;
window.print = function() {
  setColors('body *');
  setIconColors('body .fa');
  window._originalPrint();
  setTimeout(function () {
    resetColors('body *');
    resetIconColors();
  }, 100);
}

İçin CSS oluşturmak üzere simge yolları bulan bölüm: önce öğeler bu SO yanıtından bir kopyadır

box-shadowÖzelliği de kullanabilirsiniz .

Eğer kullanıyorsanız Bootstrap özel css dosyasında bu kodu kullanmak .sadece. Bootstrap baskı önizlemedeki tüm renklerinizi kaldırır.

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}

Bootstrap'ı "Medya stillerini yazdır" seçeneği olmadan indirirseniz, bu sorunla karşılaşmazsınız ve bootstrap.css dosyanızdaki "@media print" kodunu el ile kaldırmanız gerekmez.

Bu kullandığınız takdirde bootstrap için en iyi çözüm bu kadar tek bir şey kaldırmayı yapmak } {yazdırmak @media bu içindeki tüm kodu. ve baskı önizlemesini çekerken arka plan grafiklerini daha fazla ayardan etkinleştirin.

Harici css kaynak dosyamı iki kez yüklerim ve media = "screen" öğesini media = "print" olarak değiştiririm ve masamın tüm kenarlıkları gösterilir

Bunu dene :

<link rel="stylesheet" media="print" href="bootstrap.css" />

<link rel="stylesheet" media="screen" href="bootstrap.css" />