HTML/CSS - Tại sao màu nền chuyển sang màu trắng khi in?

Màu nền của tôi hoặc thậm chí màu phông chữ của các phần tử của tôi đột nhiên chuyển sang màu trắng khi in. Dưới đây là một đánh dấu mẫu:HTML/CSS - Tại sao màu nền chuyển sang màu trắng khi in?

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

một đây là CSS

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

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

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

Nguồn

2011-08-17 dpp

Tất cả các hình nền sẽ tự động được lột ra khỏi bản in. Đó là cách để ngăn chặn chất thải mực.

Tuy nhiên, bạn có thể bật tính năng này trong trình duyệt của mình. (Làm thế nào để làm điều đó phụ thuộc vào từng trình duyệt cụ thể).

Nguồn

2011-08-17 09:19:27

Không có cách nào để in màu nền mà không đặt tùy chọn theo cách thủ công trong trình duyệt của bạn. Tuy nhiên, điều này có thể không phải là một lựa chọn cho một số người. Cách giải quyết tốt nhất tôi có thể tìm thấy khá không phù hợp. Thay vì sử dụng "màu nền" (không in), bạn nên tạo thẻ div có đường viền màu lớn trên đó. Vấn đề là viền màu có thể in chính xác. Sau đó, nơi màu được đánh dấu được hiển thị, đặt một thẻ div khác với văn bản trên đó lên trên cùng. Không thích hợp, nhưng nó hoạt động.

Tốt nhất là đặt cả div văn bản và div đánh dấu trong div thứ ba cho vị trí dễ dàng. các div bên trong nên là vị trí "tuyệt đối" và div bên ngoài nên có vị trí "tương đối". Mã mẫu này được thử nghiệm trong cả firefox và 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>

Nguồn

2012-03-15 20:32:27

HTML/CSS - Tại sao màu nền chuyển sang màu trắng khi in?

Trả lời

Các vấn đề liên quan