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-color
w @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-color
nie 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
źródło
@media print
zapytanie, które usuwa kolory tła z tabel (np. Paski).Odpowiedzi:
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.
źródło
*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
Aby włączyć drukowanie w tle w Chrome:
źródło
color-adjust
zamiast tego możesz użyć .Rozumiem:
CSS:
Działa dla wszystkich pudełek - w tym komórek tabeli !!!
źródło
-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)Spróbuj tego, zadziałało dla mnie w Google Chrome:
źródło
-webkit-print-color-adjust: exact;
samis Not enough
musisz użyć!important
z atrybutemto jest drukowanie podglądu na chrome po dodaniu
!important
każdegobackground-color
icolor
attrubute w każdym tagua to jest podgląd wydruku na chrome przed dodaniem
!important
teraz, aby wiedzieć, jak dostosować styl
inject
!important
div, sprawdź tę odpowiedź Nie mogę wprowadzić stylu z regułą „! important”źródło
Dwa rozwiązania, które działają (przynajmniej na nowoczesnym Chrome - nie były testowane dalej):
źródło
color-adjust
lub wariantu webkit, w rzeczywistości nie potrzebuję ważnej zasady.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:
źródło
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:
Aktywuj go, dodając klasę do swojego elementu:
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;
lubdisplay: 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 +).
źródło
W przypadku chrome użyłem czegoś takiego i mi się udało.
W tagu body
Lub dla konkretnego elementu, powiedzmy, że masz tabelę i chcesz wypełnić td, czyli komórkę,
źródło
Pomimo tego,
!important
że użycie jest generalnie źle widziane, jest to obraźliwy kod,bootstrap.css
który zapobiega drukowaniu wierszy tabelibackground-color
.Załóżmy, że próbujesz stylizować następujący kod HTML:
Aby nadpisać ten CSS, umieść następującą (bardziej szczegółową) regułę w swoim arkuszu stylów:
To działa, ponieważ reguła jest bardziej szczegółowa niż domyślna metoda ładowania początkowego.
źródło
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!important
oczywiście nie zadziałały, ale siębox-shadow: inset 0 0 0 1000px gold;
udało ... świetny hack, bardzo dziękuję :)źródło
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:
I twój CSS:
źródło
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:
źródło
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.
źródło
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:
źródło
Możesz użyć tagu
canvas
i „narysować” tło, które działają na IE9, Gecko i Webkit.źródło
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
Css
}
źródło
!important
wartości dla każdego atrybutu w mojej klasie, co spowodowało, że zaczął działać.Czy nie ustawić
background-color
wewną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
źródło
Działa w Chrome i Edge
źródło