Achtergrondkleur niet zichtbaar in afdrukvoorbeeld

Ik probeer een pagina af te drukken. Op die pagina heb ik een tabel een achtergrondkleur gegeven.
Als ik het afdrukvoorbeeld in Chrome bekijk, neemt het niet de eigenschap van de achtergrondkleur aan…

Dus ik heb deze eigenschap geprobeerd:

-webkit-print-color-adjust: exact; 

maar de kleur wordt nog steeds niet weergegeven.

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>[email protected]</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>

Antwoord 1, autoriteit 100%

De Chrome CSS-eigenschap -webkit-print-color-adjust: exact;werkt naar behoren.

Het kan echter vaak lastig zijn om ervoor te zorgen dat u de juiste CSS hebt om af te drukken. U kunt verschillende dingen doen om de moeilijkheden die u ondervindt te voorkomen. Scheid eerst al uw print-CSS van uw scherm-CSS. Dit gebeurt via het @media printen @media screen.

Vaak is alleen het instellen van wat extra @media printCSS niet genoeg, omdat je al je andere CSS ook bij het printen hebt staan. In deze gevallen hoeft u zich alleen maar bewust te zijn van de CSS-specificiteit, aangezien de afdrukregels niet automatisch winnen van niet-afgedrukte CSS-regels.

In jouw geval werkt de -webkit-print-color-adjust: exact. Uw background-coloren kleurdefinities worden echter overtroffen door andere CSS met een hogere specificiteit.

Hoewel ik niethet gebruik van !importantonder bijna alle omstandigheden goedkeur, werken de volgende definities correct en leggen ze het probleem bloot:

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

Hier is de viool(en embeddedvoor het gemak van afdrukvoorbeelden).


Antwoord 2, autoriteit 19%

Die CSS-eigenschap is alles wat je nodig hebt, het werkt voor mij… Bij het bekijken van een voorbeeld in Chrome heb je de optie om het BW en Kleur te zien (Kleur: Opties- Kleur of Zwart-wit), dus als je die optie niet hebt, raad ik aan om deze Chrome-extensie te gebruiken en je leven gemakkelijker te maken:

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

De site die je op fiddle hebt toegevoegd heeft dit nodig in je media print css (je hoeft het alleen maar toe te voegen…

media print CSS in de body:

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

UPDATE
OK, dus jouw probleem is bootstrap.css…het heeft net zo goed een mediaprint-css als jij…je verwijdert dat en dat zou je kleur moeten geven…je moet ofwel je eigen doen of bij bootstraps blijven css afdrukken.

Als ik hierop op afdrukken klik, zie ik kleur….
http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/


Antwoord 3, autoriteit 9%

Chrome geeft geen achtergrondkleur of verschillende andere stijlen weer bij het afdrukken als de instelling voor achtergrondafbeeldingen is uitgeschakeld.

Dit heeft niets te maken met css, @media of specificiteit. Je kunt er waarschijnlijk omheen hacken, maar de gemakkelijkste manier om Chrome de achtergrondkleur en andere afbeeldingen te laten zien, is door dit selectievakje onder Meer instellingen goed aan te vinken.


Antwoord 4, autoriteit 7%

Ik hoefde alleen het kenmerk !importanttoe te voegen aan de tag background-color om het te laten verschijnen, ik had het webkit-gedeelte niet nodig:

background-color: #f5f5f5 !important;


Antwoord 5, autoriteit 2%

Als je bootstrap of een andere CSS van derden gebruikt, zorg er dan voor dat je alleen het mediascherm erop specificeert, zodat je de controle hebt over het printmediatype in je eigen CSS-bestanden:

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

Snippet uitvouwen


Antwoord 6, autoriteit 2%

Uw CSS moet als volgt zijn:

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

Antwoord 7, autoriteit 2%

VOOR DEGENEN DIE BOOTSTRAP.CSS gebruiken, is dit de oplossing!

Ik heb alle oplossingen geprobeerd en ze werkten niet… totdat ik ontdekte dat bootstrap.css een super irritante @media printhad die al je kleuren, achtergrondkleuren, schaduwen reset , enz…

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

Verwijder deze sectie dus van bootstrap.css (of bootstrap.min.css)

Of overschrijf deze waarden in de css van de pagina die u wilt afdrukken in uw eigen @media print

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

Antwoord 8, autoriteit 2%

Voor IE

Als je IE gebruikt, ga dan naar afdrukvoorbeeld (klik met de rechtermuisknop op document -> afdrukvoorbeeld), ga naar instellingen en daar is de optie “achtergrondkleur en afbeeldingen afdrukken”, selecteer die optie en probeer het.


Antwoord 9

Gebruik het volgende in uw @media printstylesheet.

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

Hier zijn een paar dingen om op te merken:

  • achtergrondkleur is de absolute terugval en is er meestal voor het nageslacht.
  • achtergrondafbeelding gebruikt een pixel van 1px x 1px van #404040 die is omgezet in een PNG. Als de gebruiker afbeeldingen heeft ingeschakeld, kan het werken, zo niet…
  • Stel de box-schaduw in, als dat niet werkt…
  • Border = 1/2 uw gewenste hoogte en/of breedte van doos, effen, kleur. In het bovenstaande voorbeeld wilde ik een vak met een hoogte van 60 px.
  • Zul de hoogte/breedte uit, afhankelijk van wat u in het randkenmerk controleert.
  • Letterkleur wordt standaard zwart, tenzij je !important
  • . gebruikt

  • Stel regelhoogte in op 0 om te corrigeren voor de doos die geen fysieke afmeting heeft.
  • Maak en host je eigen PNG’s đŸ™‚
  • Als de tekst in het blok moet worden teruggelopen, plaatst u deze in een div en plaatst u de div met position:relative; en verwijder regelhoogte.

Zie mijn vioolvoor een meer gedetailleerde demonstratie.


Antwoord 10

als je Bootstrapgebruikt, gebruik dan deze code in je aangepaste CSS-bestand. Bootstrap verwijdert al uw kleuren in afdrukvoorbeeld.

@media print{
  .box-text {
    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}

Antwoord 11

Weet je zeker dat dit een css-probleem is? Er zijn enkele berichten op Google over dit probleem:
http://productforums.google.com/forum/# !category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Het kan te maken hebben met het afdrukproces. Op safari, wat ook webkit is, is er een selectievakje om achtergrondafbeeldingen en kleuren af ​​te drukken in het printerdialoogvenster.


Antwoord 12

Er is een stijl in de bootstrap CSS-bestanden onder @media print{*,:after,:before ….} met kleur- en achtergrondstijlen met het label !important, die alle achtergrondkleuren van alle elementen verwijderen. Dood die twee stukjes css en het zal werken.

Bootstrap neemt de uitvoerende beslissing dat u nooiteen achtergrondkleur in afdrukken moet hebben, dus u moet hun CSS bewerken of een andere !belangrijke stijl hebben die een hogere prioriteit heeft. Goed gedaan bootstrap…


Antwoord 13

Ik gebruikte het antwoord van purgatory101maar had moeite om alle kleuren te behouden (pictogrammen, achtergronden, tekstkleuren enz…), vooral dat CSS-stylesheets niet kunnen worden gebruikt met bibliotheken die de kleuren van DOM-elementen dynamisch wijzigen. Daarom is hier een script dat de stijlen van elementen (background-coloren colour) wijzigt voordat het wordt afgedrukt en dat de stijlen wist zodra het afdrukken is voltooid. Het is handig om te voorkomen dat u veel CSS schrijft in een @media print-stylesheet, omdat dit ongeacht de paginastructuur werkt.

Er is een deel van het script dat speciaal is gemaakt om de kleur van FontAwesome-pictogrammen te behouden (of elk element dat een :before-selector gebruikt om gekleurde inhoud in te voegen).

JSFiddle toont het script in actie

Compatibiliteit:werkt in Chrome, ik heb geen andere browsers getest.

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

En pas vervolgens de functie window.printaan om de stijlen in te stellen voordat ze worden afgedrukt en daarna opnieuw in te stellen.

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

Het deel dat pictogrammenpaden vindt om CSS te maken voor :before elementen is een kopie van dit SO-antwoord


Antwoord 14

U kunt ook de eigenschap box-shadowgebruiken.


Antwoord 15

Je kunt inline CSS-stijlen gebruiken met !important.
Bijv.

<p style="background:red!important">ABCD</p>

Antwoord 16

Als u Bootstrap downloadt zonder de optie “Mediastijlen afdrukken”, heeft u dit probleem niet en hoeft u de code “@media print” niet handmatig in uw bootstrap.css-bestand te verwijderen.


Antwoord 17

De beste oplossing hiervoor als je bootstrap gebruikt, dus doe maar Ă©Ă©n ding: verwijder @media print {}alle code hierin. en schakel achtergrondafbeeldingen in vanuit meer instellingen terwijl u een afdrukvoorbeeld maakt.


Antwoord 18

Ik laad mijn externe CSS-bronbestand dubbel en verander de media=”screen” in media=”print” en alle randen voor mijn tabel werden getoond

Probeer dit:

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

Other episodes