Why Do Background Images Disappear When Printing in Firefox and Internet Explorer?

How to Print Background Images in Firefox and Internet Explorer

Problem: Background images disappear when printing pages in Firefox or Internet Explorer, despite using them to represent information like stars indicating a level of skill.

Solution 1: Using a Print Stylesheet

Create a separate stylesheet specifically for printing:

/* print.css */

/* media:print */
.star {
    text-indent: 0;
}

Link the print stylesheet to your HTML document:

<link rel="print stylesheet" type="text/css" href="print.css">

Solution 2: Showing Image on Print

Add an image to represent your stars within the DIV element and hide it on screen:

/* media:screen */
.star img {
    visibility: hidden;
}

/* media:print */
.star img {
    visibility: visible;
}

<div class="star"><img src="./images/star.jpg" alt="*"></div>

The above is the detailed content of Why Do Background Images Disappear When Printing in Firefox and Internet Explorer?. For more information, please follow other related articles on the PHP Chinese website!