Comment imprimer des images d'arrière-plan dans FF ou IE ?

Question

Existe-t-il un moyen de configurer ff et ie pour qu'ils impriment des images d'arrière-plan ?

J'utilise l'image des étoiles pour classer certaines compétences et je l'ai définie comme image d'arrière-plan et je l'ai positionnée pour qu'elle serve de point de départ, de point d'arrivée, de point de départ, etc. Lorsque j'essaie d'imprimer la page, les images disparaissent.

Existe-t-il un moyen de les faire apparaître lorsque j'imprime la page ou au moins de remplacer les images par des * ou quelque chose de visible ?

Answer 1

Avez-vous envisagé d'utiliser une feuille de style pour l'impression ? Cela pourrait vous permettre de faire quelque chose comme :

<div class="star">*</div>

/* media:screen */
.star {
    background: ...;
    overflow: hidden;
    text-indent: 9999em;
}

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

ou même plus facilement :

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

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

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

Vous pouvez spécifier les feuilles de style que les navigateurs doivent utiliser en fournissant une balise media, soit par css, soit sur l'élément link :

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

Answer 2

Dans votre fichier print.css, remplacez l'image de fond par un élément de liste.

Ainsi :

.background {
  display: list-item;
  list-style-image: url(yourbackgroundimage.gif);
  list-style-position: inside;
}

Cette méthode est décrite plus en détail ici : http://www.web-graphics.com/mtarchive/001703.php

Answer 3

Dans Firefox, allez dans Fichier => Mise en page. Il y a une case à cocher pour "Imprimer l'arrière-plan (couleurs et images)". Cochez-la et vous devriez être prêt.

Answer 4

En fait, j'ai trouvé la réponse assez simple.

Situation : J'avais une balise div avec une image de fond. Cette image ne s'affichait pas à l'impression.

Solution :

1. Créez une autre feuille de style appelée "print.css"

2. Ajoutez la ligne de code suivante à toutes vos pages web, juste après votre lien original vers la feuille de style css :

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

3. Immédiatement après votre pour l'en-tête original non imprimable, ajoutez ce qui suit :

   <div id="header"></div> <!-- YOUR NON PRINTING HEADER -->
   
   <div id="printheader"><img src="images/header_image.jpg" width="940" height="100" alt="header" /></div>

4. Dans votre fichier style.css, qui est le style css principal de votre site, ajoutez la ligne suivante :

   #printheader {display: none; } /* Makes the print header not visible */

5. Dans votre fichier print.css, ajoutez le code suivant :

   #footer, #nav, #sidenav, .print, .search, .breadcrumb, .noprint {display: none;} /* Items from your page you DO NOT want to print */
   
   #container, #container2, #contentwide, #contentwide_tpsub, #contentwide_tp, #contentwide_open {width: 100%; margin: 0; float: none;} /* Clear widths to ensure all text is printed */
   
   #printheader {display: block; } /* Turns ON the div when printing */

Il s'agit essentiellement de désactiver l'en-tête de la page "écran" normale et d'activer l'en-tête d'impression lors de l'appel à l'impression.

** Remarque : vous devrez modifier le fichier print.css pour y inclure d'autres éléments de votre fichier style.css afin de formater les polices, les couleurs, etc. Jouez avec "Aperçu avant impression" et ajoutez les éléments dont vous avez besoin jusqu'à ce que vous obteniez l'impression que vous recherchez.

Answer 5

Ne pas utiliser background-image pour afficher des images imprimables, utilisez la fonction normale <img> à la place.

background-image est destiné à sans importance les images que la plupart des navigateurs modernes ont tendance à ignorer lors de l'impression (paramètre par défaut dans IE 11, Chrome 35, FF 30).

Pourquoi voulez-vous no veulent utiliser le img tag ?

• Problèmes d'alignement - Utilisez le positionnement absolu pour résoudre les problèmes d'alignement.

• Spriting - Spriting est possible en utilisant un simple img y div étiquettes.

• rendre plus difficile l'enregistrement de l'image par l'utilisateur - C'est-à-dire également possible avec un simple img y div étiquettes.

• Pour "garder mon HTML propre" - Est-ce que l'une des solutions de contournement vous permet vraiment d'assainir le système ? Laissez tomber :)