web-dev-qa-db-fra.com

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

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 à la 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, sans sprites CSS possibles.

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

cssprintingbackground-image
86
DisgruntledGoat

Vous avez très peu de contrôle sur les méthodes d'impression d'un navigateur. Vous pouvez au maximum SUGGÉRER, mais si les paramètres d'impression du navigateur ont pour fonction "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 "d'arrière-plan" flottantes qui se trouvent derrière un autre contenu.

45
Marc B

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 et/ou de l'image de fond.

179
Marco Bettiolo

J'ai trouvé un moyen d'imprimer l'image de fond avec CSS. Cela dépend un peu de la manière 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;
}

A 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 "au premier plan", ce qui la rend imprimable . Vous devrez peut-être ajouter du code CSS supplémentaire pour rendre le z-index correct. Mais encore une fois, cela dépend de la façon dont votre page est présentée.

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

68
ckpepper02

Les navigateurs, par défaut, ont la possibilité d’imprimer les couleurs de fond et les images. Vous pouvez ajouter quelques lignes en CSS pour contourner ce problème. Il suffit d'ajouter:

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

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

J'ai aussi ajouté des contrôles 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>
12
Tarik

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;
}
7
nuts-n-beer

Comme @ ckpepper02, le contenu du corps: l’option url fonctionne bien. J'ai cependant constaté que si vous le modifiez légèrement, vous pouvez simplement l'utiliser pour ajouter une image d'en-tête de tri à l'aide du pseudo-élément: before comme suit.

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

Cela fera glisser l'image en haut de la page, et de mes tests limités, cela fonctionne dans Chrome et l'IE9

-hanz

6
hanz

Utilisez psuedo-elements. Alors que de nombreux navigateurs ignorent les images d'arrière-plan, les éléments psuedo dont le contenu est 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 approximativement à l'endroit où l'image aurait dû être placée (même si ce n'est pas aussi facile et 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 support d'impression, puis le rendre visible dans le bloc de requête de support d'impression. 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 du chargement de page normal, ce qui ajoute un encombrement inutile. Vous pouvez éviter cela en utilisant simplement la même image/le même chemin que vous avez déjà utilisés pour l'image visible d'origine.

4
Dtipson

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

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

} 

1
Hady El-Hady

Vous pouvez utiliser des bordures pour des couleurs fixes.

 borderTop: solid 15px black;

et pour un 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
Victor Batista

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 incluant ceci dans un

@media print {
}

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

0
ms609