web-dev-qa-db-fra.com

Comment obtenir une image de fond pour imprimer en css?

J'utilise le package ASP Net Sprites pour créer des sprites CSS sur mon site Web.

Cela fonctionne, mais les images qu'il génère n'apparaissent pas à l'impression.

Le code généré au niveau HTML est:

<a href="/" id="siteLogo"><img class="getmecooking-logo-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></a>

Comment faire apparaître l'image du logo lorsqu'un utilisateur imprime la page?

J'ai essayé d'ajouter ceci dans ma feuille de style print.css, mais cela n'a pas fonctionné:

#siteLogo
{
    visibility: visible;
}

Le fichier print.css fonctionne correctement et le formatage de la page est conforme à celui souhaité pour d'autres éléments de la page. Mon seul problème est que je ne parviens pas à afficher l’image du logo du site lorsqu’elle est imprimée.

htmlcssprintingimage
24
Techboy

Il appartient à l'utilisateur et aux paramètres de son navigateur d'imprimer ou non les images d'arrière-plan. Pour ne pas vous en remettre à cela, placez les images directement dans le code HTML avec une balise <img /> réelle. 

24
Kon

Pour Chrome et Safari, vous pouvez ajouter les éléments suivants dans votre CSS:

@media print
{
    * {-webkit-print-color-adjust:exact;}
}

Pour les autres navigateurs Web, il appartient malheureusement à l'utilisateur de sélectionner manuellement l'option d'impression des images d'arrière-plan (par exemple, pour les utilisateurs dotés de IE 9, 10 et 11, ils doivent cliquer sur l'icône en forme de pignon et activez l'option)

93
Johann

Vous pouvez avoir votre propre requête multimédia pour l'impression et utiliser: before selector avec l'attribut "content".

Mettez ceci dans la requête du média et cela insérera l'image quand vous essayez d'imprimer: 

p:before { content: url(images/quote.gif); }

http://www.htmldog.com/reference/cssproperties/content/

37
Charlie

Il fonctionne dans Google Chrome lorsque vous ajoutez l'attribut! Important à l'image d'arrière-plan. Assurez-vous que vous ajoutez d'abord l'attribut, puis réessayez. Vous pouvez le faire comme suit:

.class-name {
background: url('your-image.png') !important;
}

Vous pouvez aussi utiliser ces règles d’impression utiles et les mettre à la fin du fichier css:

@media print {
* {
    -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
    color-adjust: exact !important;  /*Firefox*/
  }
}
3
Hady El-Hady

Votre document principal importera 2 feuilles de style, une pour l’écran et une autre pour l’imprimante. Vous pouvez ajuster les paramètres de support selon vos besoins.

<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>

Voici l'image de fond appelée dans votre fichier css principal utilisé dans les navigateurs.

.bg {
background: url("http://fpoimg.com/250x250") top left no-repeat;
width:250px;
height: 250px;
}

Et votre hack d'impression utilisé par les navigateurs lorsque les utilisateurs ouvrent la boîte de dialogue d'impression. Ainsi, vous pouvez ajouter la classe print à votre div et la faire imprimer, ou la supprimer si nécessaire.

.bg.print {
display: list-item;
list-style-image: url("http://fpoimg.com/250x250");
list-style-position: inside;
}

Remarque: vous pouvez également utiliser la règle @media au lieu d'importer des fichiers si vous souhaitez éviter de créer une requête http supplémentaire.

référence from: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html

3
Dexter

Essaye ça:

@media print {
    body:before {
        content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg);
        position: absolute;
        z-index: -1;
      }
}
1
ashkufaraz

Si vous utilisez Internet Explorer, procédez comme suit:

  • Allez dans le menu 'Outils'.
  • Cliquez sur 'Options Internet'.
  • Cliquez sur l'onglet "Avancé".
  • Cochez la couleur et les images d’arrière-plan.
0
kriti
<div style="position: relative;">
    <img src="/images/blue.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello, world.
    </div>
</div>

Cela donne un sens au CSS que vous avez posté, voir aussi ce site: https://defuse.ca/force-print-background.htm

0
Nasim Bahar

set media = "print"

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

Référence

0
diEcho