Problemy z CSS @media print z kolorem tła;

176

Jestem nowy w tej firmie i mamy produkt, który wykorzystuje mile CSS. Próbuję utworzyć arkusz stylów do wydrukowania dla naszej aplikacji, ale mam problemy z programem background-colorw @media print.

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

Wszystko inne działa, mogę modyfikować granice i tym podobne, ale background-colornie przejdę przez wydruk. Teraz rozumiem, że może nie być w stanie odpowiedzieć na moje pytanie bez dodatkowych szczegółów. Byłem po prostu ciekawy, czy ktoś miał wcześniej ten problem lub coś podobnego.

css media-queries

— Weston Watson
źródło

Cóż, przechodzi przez W3C CSS-Validator ( jigsaw.w3.org/css-validator ). To dziwne

— GôTô

Nie powinno to już stanowić problemu. Doszedłem do tego problemu, ponieważ miałem stronę bootstrap, a bootstrap ma @media printzapytanie, które usuwa kolory tła z tabel (np. Paski).

— Martin Thoma,

@MartinThoma Jak rozwiązałeś problem? Czy usunąłeś CSS z szablonu Boostrap?

— EduLopez,

242

JEŚLI użytkownik ma wyłączoną opcję „Drukuj kolory i obrazy tła” w swoich ustawieniach drukowania, żaden arkusz CSS tego nie zastąpi, więc zawsze należy to uwzględnić. To jest ustawienie domyślne .

Po ustawieniu tak, że wydrukuje kolory tła i obrazy, to, co tam masz, będzie działać.

Występuje w różnych miejscach. W IE9beta znajduje się w Drukuj-> Opcje strony w opcjach papieru

W FireFox jest to w Ustawienia strony -> [Format i opcje] zakładka w Opcjach.

— Ryan Ternier
źródło

10

Świetnie, właśnie zaoszczędziłeś mi godzin na męce głowy nad tym CSS.

— Weston Watson

162

W Chrome i Safari możesz dodać styl css „-webkit-print-color-adjust: exact;” do elementu, aby wymusić wydrukowanie koloru tła i / lub obrazu

— Marco Bettiolo

11

Wydaje się, że @MarcoBettiolo nie działa z najnowszymi kompilacjami webkitów,! Ważne jednak

— Hedde van der Heide

2

Dodanie! Ważne do reguły rozwiązało to również dla mnie.

— Thiago Duarte

14

Aby to rozwinąć, dodałem dopasowanie kolorów: ścisłe; FF do pracy. Więc mój pełny kod to*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

— BitBug

252

Aby włączyć drukowanie w tle w Chrome:

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

— drolex
źródło

7

Wydaje się, że rozwiązało to mój problem z drukowaniem tabeli z alternatywnymi kolorami wierszy.

— Victor J. Garcia

Upewnij się, że używasz prawidłowej wielkości liter w ścieżce obrazu, ponieważ okno dialogowe drukowania Chrome nie ładuje obrazów przy pierwszej próbie. Dzieje się tak tylko w przypadku, gdy adres URL właściwości obrazu tła nie pasuje do wielkości liter nazwy folderu fizycznego. (Zgłoszone w wersji 48.0.2564.109 m)

— MPaul

3

jaka jest alternatywa w przeglądarce Firefox i IE

— Shan Khan

5

Uwaga dla przyszłych podróżników w czasie: color-adjustzamiast tego możesz użyć .

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

@ КонстантинВан nie jest obsługiwana w przeglądarce Chrome od kwietnia 2019 r. To jest dokumentacja przeglądarki Firefox.

— Thomas

83

Rozumiem:

CSS:

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

Działa dla wszystkich pudełek - w tym komórek tabeli !!!

(Jeśli wierzyć plikowi wyjściowemu drukarki PDF ...?)
Testowane tylko w Chrome + Firefox na Ubuntu ...

— T4NK3R
źródło

5

Możesz dodać obsługę IE8 i IE9 za pomocą

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

Jeśli chcesz, aby Twoje obrazy sprite były widoczne, użyj techniki img / clip css-tricks.com/css-sprites-with-inline-images , która da ci obrazy w IE9 i FF ( choć nie IE8)

— emik

2

Działa świetnie w normalnych przeglądarkach, ale nie w IE, nawet przy sugestii @evami.

— woz

@woz Mam to działające w projekcie z IE8 / 9. Gradient (podobnie jak box-shadow) dodaje dodatkowy element tła, który nie jest eliminowany przez wymuszony reset przeglądarki. czy mógłbyś podzielić się swoim css?

— emik

2

Wydaje się, że to nie działa z najnowszą wersją Chrome (60).

— swervo

1

To się nie udaje w Chrome. Używam 69. To sugeruje, że zostało zepsute co najmniej od 60 (zgodnie z komentarzem @ swervo).

— ikonoklast

34

Spróbuj tego, zadziałało dla mnie w Google Chrome:

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

— MAXE
źródło

22

-webkit-print-color-adjust: exact; samis Not enough musisz użyć !importantz atrybutem

to jest drukowanie podglądu na chrome po dodaniu !importantkażdego background-colori colorattrubute w każdym tagu

a to jest podgląd wydruku na chrome przed dodaniem!important

teraz, aby wiedzieć, jak dostosować stylinject !important div, sprawdź tę odpowiedź Nie mogę wprowadzić stylu z regułą „! important”

— Basheer AL-MOMANI
źródło

Może dlatego, że masz już arkusz stylów @print, który resetuje kolor tła.

— Niccolo M.

O MÓJ BOŻE! to działa, ale jak to działa? Czy możesz wyjaśnić.

— rahim.nagori

1

To jedyne rozwiązanie, które do tej pory zadziałało. <div style = "- webkit-print-color-adjust: exact! important; background-color: red! important;"> ... </div>

— Thomas

10

Dwa rozwiązania, które działają (przynajmniej na nowoczesnym Chrome - nie były testowane dalej):

! ważne tylko w zwykłej deklaracji css działa (nawet w druku @media)
Użyj svg

— yar1
źródło

6

! ważne rozwiązuje problem w każdej nowoczesnej przeglądarce, o ile włączona jest opcja „Drukuj kolory i obrazy tła”.

— Chris Hynes,

2

! important działa również bez interwencji użytkownika, jeśli używasz go razem z body {-webkit-print-color-adjust: exact; } (zgodnie z komentarzem powyżej)

— yar1

2

Odkryłem, że jeśli używam color-adjustlub wariantu webkit, w rzeczywistości nie potrzebuję ważnej zasady.

— Kasapo

7

Jeśli chcesz tworzyć strony „do druku”, polecam dodanie „! Important” do CSS @media. Zachęca to większość przeglądarek do drukowania obrazów tła, kolorów itp.

PRZYKŁADY:

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

— piwo orzechowe
źródło

6

Jest jeszcze jedna sztuczka, którą możesz zrobić bez aktywowania opcji drukowania obramowania wspomnianej w innych postach. Ponieważ obramowania są drukowane, możesz zasymulować jednolite kolory tła za pomocą tego hacka:

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

Aktywuj go, dodając klasę do swojego elementu:

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

Chociaż wymaga to dodatkowego kodu i dodatkowej uwagi, aby kolory tła były widoczne, jest to jedyne znane mi rozwiązanie.

Zauważ, że ten hack nie zadziała na elementach innych niż display: block;lub display: table-cell;, więc na przykład <table class="your-background">i <tr class="your-background">nie zadziała.

Używamy tego, aby uzyskać kolory tła we wszystkich przeglądarkach (nadal wymagana jest IE9 +).

— jądro
źródło

1

to szalony hack, ale przynajmniej wymusza jakąś formę koloru tła niezależnie od ustawień drukowania. genialne, dzięki.

— Brad Zacher,

6

W przypadku chrome użyłem czegoś takiego i mi się udało.

W tagu body

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

Lub dla konkretnego elementu, powiedzmy, że masz tabelę i chcesz wypełnić td, czyli komórkę,

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

— Aamir Shaikh
źródło

5

Pomimo tego, !importantże użycie jest generalnie źle widziane, jest to obraźliwy kod, bootstrap.cssktóry zapobiega drukowaniu wierszy tabeli background-color.

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

Załóżmy, że próbujesz stylizować następujący kod HTML:

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

Aby nadpisać ten CSS, umieść następującą (bardziej szczegółową) regułę w swoim arkuszu stylów:

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

To działa, ponieważ reguła jest bardziej szczegółowa niż domyślna metoda ładowania początkowego.

— Aelfinn
źródło

Po godzinach poszukiwań znalazłem tę odpowiedź. Wszedłem i wyeliminowałem linie z Bootstrap.css i WHAM! Kolory w tle do druku!

— Mighty Ferengi

1

Dziękuję Ci! Wreszcie, to jest odpowiedź, która pozwoliła mi zacząć działać, ale musiałem dodać: body {-webkit-print-color-adjust: ścisłe! Ważne; }

— Ocean Airdrop

3

Znalazłem ten problem, ponieważ miałem podobny problem podczas próby wygenerowania pliku PDF z wyniku HTML w Google Apps Script, gdzie kolory tła również nie są „drukowane”.

Rozwiązania -webkit-print-color-adjust:exact;i !importantoczywiście nie zadziałały, ale się box-shadow: inset 0 0 0 1000px gold;udało ... świetny hack, bardzo dziękuję :)

— logol
źródło

2

Pomyślałem, że dodam ostatnią i odpowiednią pomoc z 2015 r., Pochodzącą z niedawnego doświadczenia z drukowaniem CSS.

Był w stanie drukować tła i kolory niezależnie od ustawień okna dialogowego drukowania.

Aby to zrobić, musiałem użyć kombinacji ! Important & -webkit-print-color-Adjust: dokładnie! Ważne, aby tło i kolory były drukowane poprawnie.

Ponadto podczas deklarowania kolorów stwierdziłem, że najbardziej uparte obszary wymagają definicji bezpośrednio do celu. Na przykład:

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

I twój CSS:

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

— Jonathan
źródło

2

Przetestowane i działające w Chrome, Firefox, Opera i Edge do 2016/10. Powinien działać na dowolnej przeglądarce i zawsze wyglądać zgodnie z oczekiwaniami.

OK, zrobiłem mały eksperyment w różnych przeglądarkach, aby wydrukować kolory tła. Po prostu skopiuj, wklej i ciesz się!

Oto pełna strona HTML do wydrukowania dla bootstrapa:

<!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
źródło

1

Najlepszym „rozwiązaniem”, jakie znalazłem, jest umieszczenie widocznego przycisku lub łącza „Drukuj”, które powoduje wyświetlenie małego okna dialogowego wyjaśniającego odważnie, zwięźle i zwięźle, że muszą dostosować ustawienia drukarki (z instrukcją wypunktowaną ABC 123), aby włączyć tło i drukowanie obrazu. To było dla mnie bardzo skuteczne.

— alano
źródło

1

W niektórych przypadkach (bloki bez treści, ale z tłem) można to zmienić za pomocą obramowań, indywidualnie dla każdego bloku.

Na przykład:

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

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

— Gedeon
źródło

0

Możesz użyć tagu canvasi „narysować” tło, które działają na IE9, Gecko i Webkit.

— Thomas Lecavelier
źródło

0

Jeśli nie masz nic przeciwko użyciu obrazu zamiast koloru tła (lub być może obrazu z kolorem tła), poniższe rozwiązanie zadziałało dla mnie w FireFox, Chrome, a nawet IE bez żadnych nadpisań. Umieść obraz gdzieś na stronie i ukryj go do czasu wydrukowania przez użytkownika.

HTML na stronie z obrazem tła

<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
źródło

Podjąłem twoje podejście i próbowałem zmusić go do działania w IE11, ale niestety nie zadziałało. Tak było, dopóki nie umieściłem !importantwartości dla każdego atrybutu w mojej klasie, co spowodowało, że zaczął działać.

— Sal Alturaigi,

0

Czy nie ustawić background-colorwewnątrz arkusza druku. Wystarczy ustawić atrybut w normalnym pliku css i działa dobrze :)

Sprawdź ten przykład: Najlepszy szablon druku HTML z nagłówkiem i stopką

Demo: najlepszy drukowany szablon HTML z prezentacją nagłówka i stopki

— Dryden Williams
źródło

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>

Działa w Chrome i Edge

— Wasilij Iwanow
źródło