J'ai utilisé les frontières pour simuler les milieux quand je vraiment besoin d'une couleur de fond. Quelque chose comme ça fonctionne (mais je me excuse de ne pas avoir testé ce):
div.must-have-background-for-print {
position: relative;
width: 400px;
}
div.must-have-background-for-print div.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 400px solid #999;
}
En réponse au commentaire de @ Steve Quezadas, l'idée est que, plutôt que d'utiliser un arrière-plan, vous insérez un élément dans l'élément a besoin de l'arrière-plan et lui applique une bordure extrêmement large pour qu'il remplisse l'élément extérieur. Cela exige plus probable que le contenu de cet élément sont aussi à l'intérieur d'une autre enveloppe de sorte qu'ils apparaissent au-dessus du nouvel élément de fond ...
Si vous avez commencé avec ceci:
<div class="has-background">Some stuff in here</div>
Vous pouvez utiliser cette :
<div class="has-background">
<div class="background" />
<div class="content">Some stuff in here</div>
</div>
Ceci est extrêmement moche, mais je l'ai utilisé dans le passé et il résout le problème des couleurs d'arrière-plan ne pas imprimer. Et, avant de le demander, vous devrez adapter le CSS à votre cas spécifique. Je décris simplement le concept d'utilisation de bordures pour remplacer les arrière-plans. Votre implémentation dépendra de la structure de votre page, ce qui est extrêmement difficile si vous ne disposez pas de largeurs ou de hauteurs fixes sur vos éléments.
Je suis un peu confus quant à l'intention du code ci-dessus. Pourquoi le "div.must-have-background-for-print" est-il listé deux fois? Un des blocs a un positionnement "absolu" et l'autre bloc a un positionnement "relatif". De plus, "div.background" recherche une div avec la classe "background", n'est-ce pas? Donc, il y a deux divs? Un pour l'arrière-plan et un autre div pour le contenu qui se superpose à l'arrière-plan? –
@Steve Quezadas: Mise à jour de ma réponse avec une réponse. – Prestaul