Achtergrondkleur niet zichtbaar in afdrukvoorbeeld

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" />