HTML/CSS - Dlaczego kolor tła zmienia kolor na biały podczas drukowania?

Mój kolor tła, a nawet kolory czcionek moich elementów nagle zmieniają kolor na biały podczas drukowania. Oto próbka znaczników:HTML/CSS - Dlaczego kolor tła zmienia kolor na biały podczas drukowania?

<div id="ActionPanel"> 
    <input type="button" onclick="javascript:window.print();" value="Print"> 
</div> 

<p id="P1"> 
    Hello World! 
</p> 

<p id="P2"> 
    Hello Web! 
</p> 

<p id="P3"> 
    Hello StackOverflow 
</p>

oto CSS

@media all 
{ 
    body 
    { 
     background-color:green; 
    } 

    #P1 
    { 
     background-color:#f00;  
    } 
} 

@media print 
{ 
    #ActionPanel 
    { 
     visibility:hidden; 
    } 
}

Źródło

2011-08-17 dpp

Wszystkie tła są automatycznie zabrana z wersji drukowanej. W ten sposób zapobiega się marnowaniu atramentu.

Można jednak włączyć tę funkcję w przeglądarce. (Jak to zrobić, zależy od konkretnej przeglądarki).

Źródło

2011-08-17 09:19:27

Nie można drukować w tle bez ręcznego ustawienia preferencji w przeglądarce. Jednak dla niektórych osób może to nie być możliwe. Najlepsze obejście, jakie mogę znaleźć, jest raczej nieeleganckie. Zamiast używać "background-color" (który nie drukuje), powinieneś utworzyć znacznik div z dużą kolorową ramką. Chodzi o to, że kolorowe ramki mogą drukować poprawnie. Następnie, gdy wyświetlany jest podświetlony kolor, ułóż kolejny znacznik div z tekstem na górze. Nieelegancki, ale działa.

Najlepiej ustawić podział tekstu i wyróżnik div w obrębie trzeciego elementu div, aby ułatwić umieszczanie. wewnętrzni divy powinni być pozycją "absolutną", a zewnętrzny div powinien mieć pozycję "względną". Ten przykładowy kod jest testowany zarówno w firefox, jak i chrome:

<style type="text/css"> 
    #outer_box { 
     position: relative; 
     border: 2px solid black; 
     width: 500px; 
     height:300px; 
    } 

    #yellow_highlight { 
     position: absolute; 
     width: 0px; 
     height: 30px; 
     border-left: 300px; 
     border-color: yellow; 
     border-style: solid; 
     top: 0; 
     left: 0px 
    } 

    #message_text { 
     position: absolute; 
     top: 0; 
     left: 0px; 
    } 
</style> 

<body> 
    <div id="outer_box"> 
    <div id="yellow_highlight">&nbsp;</div> 
    <div id="message_text">hello, world!</div> 
    </div> 
</body>

Źródło

2012-03-15 20:32:27

HTML/CSS - Dlaczego kolor tła zmienia kolor na biały podczas drukowania?

Odpowiedz

Powiązane problemy