web-dev-qa-db-fra.com

la couleur d'arrière-plan div dans la page d'impression ne fonctionne pas

Je veux utiliser une div qui a un background-color, mais si j'imprime la page, elle apparaît en blanc.

Lorsque je crée une table à l'aide de <tr bgcolor="#333333">, cela ne fonctionne pas non plus.

Comment créer une page d'impression à l'aide de css et html?

Mon code:

<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
   <tr bgcolor="#999999">
       <td align=right colspan=2><span style="font:bold 14px 'b nazanin';">Text</span></td>
   </tr>
</table>
htmlcssbackground-colorprint-preview
21
Ebad ghafoory

J'examinerais la méthode media query pour cibler une feuille de style sur l'impression. Je ne pense pas que vous trouviez un moyen commun à tous les navigateurs de faire ce que vous voulez (contrôler si l'imprimante de l'utilisateur imprime un arrière-plan) sans utiliser les PDF de votre contenu, ce qui peut ne pas être souhaitable/faisable. Cependant, vous devriez envisager de manipuler spécialement vos styles d'impression et peut-être éviter les arrière-plans dans votre conception de la page imprimée.

http://www.w3.org/TR/css3-mediaqueries/

MODIFIER

En voyant votre autre commentaire, si vous devez imprimer les arrière-plans avec un seul utilisateur, apprenez à votre utilisateur comment imprimer des arrière-plans sur l’imprimante. Voir par exemple dans Firefox (case à cocher):

print backgrounds dialog Firefox

23
Jared Farrish

CSS: box-shadow: inset 0 0 0 1000px gold;

Fonctionne pour tous les navigateurs et sur les cellules et les lignes de tableau.

20
KDawg

Les couleurs et les images d'arrière-plan ne s'impriment pas par défaut.

C’est une option de l’imprimante que vos utilisateurs pourraient modifier, mais vous ne pouvez absolument pas compter sur vos utilisateurs pour le savoir ou le faire. Vous ne pouvez pas contrôler cela du côté Web (pour autant que je sache).

18
Marek Musielak

Voici quelque chose qui a fonctionné pour moi car j'utilisais un élément de bloc de taille fixe. L'image utilisée est 1px X 1px mais doit être agrandie à la taille de la boîte. De cette façon, nous imprimons l'image directement au lieu de la couleur/image d'arrière-plan. 

<style type="text/css">
.outer {
    width: 200px;
    height: 80px;
    position: relative;
}
.outer .grayBg {
    position: absolute;
    left: 0;
    top: 0;
    height: 80px;
    width: 100%;
    z-index: 1
}
.inner {
    width: 100%;
    position: relative;
    z-index: 10
}
</style>


<div class="outer"><img src="grayBg.png" class="grayBg" />
  <div class="inner">Some text</div>
</div>
2
srinikolli

Vous pouvez cependant toujours utiliser une image pour cela. Faites une image avec une largeur de 1px et répétez-la comme ceci:

background: url('path/to/image.png') repeat-x;
0
Boyye