Comment forcer les navigateurs à imprimer les images d'arrière-plan en CSS ?

Question

Cette question a été demandée avant mais la solution n'est pas applicable dans mon cas. Je veux m'assurer que certaines images d'arrière-plan sont imprimées parce qu'elles font partie intégrante de la page. (Il ne s'agit pas d'images directement présentes dans la page, car plusieurs d'entre elles sont utilisées en tant que sprites CSS).

Une autre solution à cette même question suggère d'utiliser list-style-image qui ne fonctionne que si vous avez une image différente pour chaque icône, aucun sprite CSS n'étant possible.

Outre la création d'une page séparée avec les icônes en ligne, existe-t-il une autre solution ?

Answer 1

https://gist.github.com/danomanion/6175687 propose une solution élégante, en utilisant une puce personnalisée à la place d'une image d'arrière-plan. Dans cet exemple, il s'agit d'appliquer une image d'arrière-plan à une page d'accueil. a avec la classe logo . (Vous devez les remplacer par l'identifiant de l'élément que vous souhaitez styliser).

   a.logo {
     display: list-item;
     list-style-image: url("../images/desired-background.png");
     list-style-position: inside;
   }

En l'incluant dans un

@media print {
}

je suis en mesure de remplacer un logo blanc sur transparent à l'écran, rendu comme image de fond, par un logo noir sur transparent pour l'impression.

Answer 2

Vous pouvez utiliser des bordures pour les couleurs fixes.

 borderTop: solid 15px black;

et pour un arrière-plan dégradé, vous pouvez utiliser :

    box-sizing: border-box;
    border-style: solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-image: linear-gradient(to right, red, blue) 100%;
    border-image-slice: 1;
    border-width: 18px;

Answer 3

On peut faire des trucs comme ça :

<style>
    @page {
        size: 21cm 29.7cm;
        size: landscape
        /*margin: 30mm 45mm 30mm 45mm;*/

    }
    .whater{
        opacity: 0.05;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 9999;
    }
</style>

Dans la balise body :

<img src="YOUR IMAGE URL" class="whater"/>