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


102

Cette question a été posée auparavant mais la solution n'est pas applicable dans mon cas. Je veux m'assurer que certaines images d'arrière-plan sont imprimées car elles font partie intégrante de la page. (Ce ne sont pas des images directement dans la page car plusieurs d'entre elles sont utilisées comme sprites CSS.)

Une autre solution sur 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 possible.

En plus de créer une page séparée avec les icônes en ligne, existe-t-il une autre solution?

Réponses:


51

Vous avez très peu de contrôle sur les méthodes d'impression d'un navigateur. Tout au plus, vous pouvez SUGGÉRER, mais si les paramètres d'impression du navigateur ont "Ne pas imprimer les images d'arrière-plan", vous ne pouvez rien faire sans réécrire votre page pour transformer les images d'arrière-plan en images flottantes de "premier plan" qui se trouvent derrière d'autres contenus.


210

Avec Chrome et Safari, vous pouvez ajouter le style CSS -webkit-print-color-adjust: exact;à l'élément pour forcer l'impression de la couleur d'arrière-plan et / ou de l'image


4
C'est génial. Rend la vie beaucoup plus facile pour les utilisateurs de phantomjs / webkit
Jason

1
@MuneemHabib Cela ne fonctionne pas dans IE, en fait, le seul navigateur pris en charge est Chrome: developer.mozilla.org/en-US/docs/Web/CSS/...
Marco Bettiolo

cela a fait l'affaire pour chrome ... heureusement dans ce cas, je n'avais besoin que de supporter wekkit ...
Davy

2
@DisgruntledGoat devrait mettre à jour cela pour être la bonne réponse car cela a rapidement résolu mon problème (mon projet au travail se concentre uniquement sur Chrome). Cela ne fonctionne évidemment pas pour tous les navigateurs, mais cela devrait être connu, dès le départ, peu importe.
Brett84c

1
@ Brett84c: Je ne suis pas d'accord car c'est une solution à un seul navigateur.
Kukeltje le

84

Les navigateurs, par défaut, ont leur option pour imprimer les couleurs d'arrière-plan et les images désactivées. Vous pouvez ajouter quelques lignes en CSS pour contourner cela. Il suffit d'ajouter:

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}

ya fonctionne bien mais mozilla marque comme non standard Cette fonctionnalité n'est pas standard et n'est pas sur une piste standard. Ne l'utilisez pas sur des sites de production face au Web: il ne fonctionnera pas pour tous les utilisateurs. Il peut également y avoir de grandes incompatibilités entre les implémentations et le comportement peut changer à l'avenir.
Qh0stM4N

3
Pourquoi le !importantnécessaire?

A travaillé pour moi! Je vous remercie.
Nick Woodhams

color-adjustn'est malheureusement pas correctement pris en charge par FireFox. Il semble s'appliquer uniquement à l'arrière-plan, pas à la colorpropriété css. Il est signalé comme un bug , sans trop d'activité ni de votes. Garder l'arrière-plan est tout à fait inutile si la couleur de la police n'est pas conservée, ce qui la rend illisible.
Frédéric

C'est une bonne solution. Gardez simplement à l'esprit que cela ne fonctionne pas avec IE11 (je sais!).
Rafael S. Fijalkowski le

76

J'ai trouvé un moyen d'imprimer l'image de fond avec CSS. Cela dépend un peu de la façon dont votre arrière-plan est présenté, mais cela semble fonctionner pour mon application.

Essentiellement, vous ajoutez le @media printà la fin de votre feuille de style et modifiez légèrement l'arrière-plan du corps.

Exemple, si votre CSS actuel ressemble à ceci:

body {
background:url(images/mybg.png) no-repeat;
}

À la fin de votre feuille de style, vous ajoutez:

@media print {
body {
   content:url(images/mybg.png);
  }
}

Cela ajoute l'image au corps en tant qu'image «de premier plan», la rendant ainsi imprimable. Vous devrez peut-être ajouter du CSS supplémentaire pour faire le z-indexbon. Mais encore une fois, cela dépend de la présentation de votre page.

Cela a fonctionné pour moi lorsque je ne pouvais pas afficher une image d'en-tête en mode d'impression.


3
C'était une solution géniale pour ce que je devais faire, qui était de changer un inline <img>(pour RWD) avec un autre pour @media print. L'image Web était sur un fond sombre, donc l'impression de cette image ne fonctionnait pas sur du papier blanc, et je ne voulais pas forcer les utilisateurs à imprimer un fond sombre sur l'en-tête. Parfait!
JHogue

@JHogue - Merci! Heureux que cela vous ait aidé.
ckpepper02

4
Bien que ce ne soit pas une réponse «correcte». C'est BEAUCOUP plus utile que la réponse acceptée.
Xenology

ci-dessous la réponse stackoverflow.com/a/15208258/915865 devrait être marquée car elle a une meilleure explication, à mon humble avis
Kat Lim Ruiz

1
Dans Firefox, cela ne fonctionnait que si vous utilisiez du contenu à l'intérieur: avant comme @ hanz answer
vaskort

18

Le code ci-dessous fonctionne bien pour moi (au moins pour Chrome).

J'ai également ajouté des commandes de marge et d'orientation de la page (portrait, paysage)

<style type="text/css" media="print">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}
</style>

9

Assurez-vous d'utiliser l'attribut! Important. Cela augmente considérablement la probabilité que vos styles soient conservés lors de l'impression.

#example1 {
    background:url(image.png) no-repeat !important;
}

#example2 {
    background-color: #123456 !important;
}

J'ai créé des rapports simples «imprimables» pour mon entreprise en utilisant cette méthode. Il fonctionne sur OS X Chrome / Safari et Windows 8 Chrome / IE (je n'ai essayé aucune autre plate-forme).
nut-n-beer

3
Cela semble n'avoir aucun effet sur Chrome, Firefox et Safari sur Mac.
intcreator

C'est exactement ce dont j'avais besoin pour appliquer l'attribut à chaque utilisation de cet élément particulier et laissez-moi imprimer le document de manière appropriée. Merci!
johnny

7

Comme @ ckpepper02 l'a dit, l'option body content: url fonctionne bien. J'ai trouvé cependant que si vous le modifiez légèrement, vous pouvez simplement l'utiliser pour ajouter une image d'en-tête en utilisant le pseudo élément: before comme suit.

@media print {
  body:before { content: url(img/printlogo.png);}
}

Cela glissera l'image en haut de la page, et d'après mes tests limités, cela fonctionne dans Chrome et l'IE9

-merci


5

Utilisez des éléments psuedo. Alors que de nombreux navigateurs ignorent les images d'arrière-plan, les éléments psuedo avec leur contenu défini sur une image ne sont techniquement PAS des images d'arrière-plan. Vous pouvez ensuite positionner l'image d'arrière-plan à peu près là où l'image aurait dû aller (bien que ce ne soit pas aussi facile ou précis que l'image d'origine).

Un inconvénient est que pour que cela fonctionne dans Chrome, vous devez spécifier ce comportement en dehors de votre requête de média imprimé, puis le rendre visible dans le bloc de requête de média imprimé. Alors, quelque chose comme ça ...

.image:before{
        visibility:hidden;
        position:absolute;
        content: url("your/image/path");
    }   

@media print {
.image{
   position:relative;
    }
    .image:before{
       visibility:visible;
       top:etc...
    }       
}

L'inconvénient est que l'image sera souvent téléchargée lors des chargements de page normaux, ajoutant du volume inutile. Vous pouvez éviter cela en utilisant simplement la même image / chemin que vous avez déjà utilisé pour l'image originale visible.


1

cela fonctionne dans google chrome lorsque vous ajoutez! attribut important à l'image d'arrière-plan assurez-vous d'ajouter d'abord un attribut et réessayez, vous pouvez le faire comme ça

    .inputbg {
background: url('inputbg.png') !important;  

}


bon point à mentionner, a résolu mon problème avec -webkit-print-color-Adjust: exact! important;
czmarc

0

Vous pouvez utiliser des bordures pour des couleurs fixes.

 borderTop: solid 15px black;

et pour le fond 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;

0

https://gist.github.com/danomanion/6175687 propose une solution élégante, utilisant une puce personnalisée à la place d'une image de fond:

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

En l'incluant dans un

@media print {
}

bloc, je peux remplacer un logo blanc sur transparent à l'écran, rendu comme image d'arrière-plan, par un logo noir sur transparent pour l'impression.


C'est un correctif mignon, mais cela ne fonctionne pas vraiment si l'image d'arrière-plan est beaucoup plus grande que le conteneur. (il étend ma div contenant)
Jabbamonkey

-1

Vous pouvez faire quelques 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 le body tag:

<img src="YOUR IMAGE URL" class="whater"/>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.