Comment obtenir un arrière-plan de l'image à imprimer à l'aide de css?

Je suis en utilisant le ASP Net Sprites paquet pour créer des Sprites CSS sur mon site.

Il est au travail, mais les images qu'il génère n'apparaissent pas lors de l'impression.

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

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

Comment puis-je obtenir le logo de l'image s'affichent lorsqu'un utilisateur imprime la page?

J'ai essayé d'ajouter dans mon impression.la feuille de style css, mais il ne fonctionne pas:

#siteLogo
{
    visibility: visible;
}

L'impression.css fonctionne bien et c'est le formatage de la page comme je le veux pour d'autres éléments sur la page. Mon seul problème est que je ne peux pas obtenir le logo du site image à afficher lors de l'impression.

Vous ne pouvez pas. C'est un paramètre du navigateur et, comme indiqué ci-dessous, vous ne pouvez pas compter sur elle, de sorte que vous devez utiliser les balises img. De toute façon c'est une bonne pratique d'utiliser les balises d'image pour les images (photos, logos, etc) et css background-image pour les arrière-plans (répétition de motifs, etc...).
La raison pour laquelle je veux faire de cette façon à automatiser la génération et l'utilisation de Sprites CSS. Je pourrais juste avoir à utiliser une seule image pour le logo.
ci-dessous a posté une solution de travail, vous devriez vraiment accepter que l'on.
Non, parce qu'il dit: "Pour Chrome et Safari, vous pouvez ajouter les lignes suivantes dans votre CSS ... Pour d'autres navigateurs web, malheureusement, il est à l'utilisateur de sélectionner manuellement l'option d'imprimer les images d'arrière-plan'

InformationsquelleAutor Techboy | 2011-05-10

26

C'est à l'utilisateur et les paramètres de son navigateur pour imprimer ou de ne pas imprimer les images de fond. Pour vous éviter de compter sur celui, mettre les images directement dans le HTML, avec un <img /> tag.

InformationsquelleAutor Kon
98

Pour Chrome et Safari, vous pouvez ajouter les lignes suivantes dans votre fichier CSS:
```
@media print
{
    * { -webkit-print-color-adjust:exact;}
}
```
Pour d'autres navigateurs web, malheureusement, il est à l'utilisateur de sélectionner manuellement l'option d'imprimer les images d'arrière-plan (par exemple, pour les utilisateurs d'IE 9, 10 et 11, ils ont qu'à cliquer sur l'icône de roue dentée -> Print -> mise en Page, et d'activer l'option)
- Je ne peux pas croire que cela n'a pas été marquée comme la solution
- pourquoi ce n'est pas une solution acceptable?
- Pour commencer, il est non standard -- il n'y a pas d'équivalent pour IE ou Firefox.
- Ce qui ne fonctionne pas sur chrome... Bizarre
- google chrome est maintenant clignoter pas webkit
- Ce doit être marquée comme étant la solution. (FYI Bootstrap 3 les gens, ce n'est pas suffisant, car BS3 fait l'opiniâtre décision de mettre en milieux transparents avec !important. C'est corrigé dans la BS 4)
- Je peux confirmer que cela fonctionne encore aujourd'hui.
- C'EST DU TRAVAIL!!!! de voter de moi bro
- merci mec c'est ce que je suis exactement à la recherche de
- Downvoted, la cause ne fonctionne pas avec mon Salesforce Foudre cmp
InformationsquelleAutor Johann
40

Vous pourriez avoir un media-query pour imprimer et à utiliser :avant de sélecteur avec l'attribut "content".

Mettre cela dans la requête de média et il va insérer l'image lorsque vous essayez d'imprimer:
```
p:before { content: url(images/quote.gif); }
```
http://www.htmldog.com/reference/cssproperties/content/
- il a travaillé, mais, comment pourrais-je faire une image de répéter?
InformationsquelleAutor Charlie
3

Votre document principal, d'importation 2 feuilles de style, 1 pour l'écran et l'autre pour l'imprimante. Vous pouvez affiner les paramètres des médias que vous avez besoin.
```
<!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>
```
Ici est l'image de fond appelé dans votre fichier css utilisé dans les navigateurs.
```
.bg {
background: url("http://fpoimg.com/250x250") top left no-repeat;
width:250px;
height: 250px;
}
```
Et votre impression hack utilisé par les navigateurs lorsque l'utilisateur de lancer la boîte de dialogue imprimer. Ainsi, vous pouvez ajouter la classe d'impression de votre div et les imprimer, ou les 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 de l'importation de fichiers si vous voulez éviter de faire une requête http.

de référence à partir de: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html
- Lone lien est considéré comme une mauvaise réponse (voir la section faq), puisqu'il est dénué de sens par lui-même et ressource cible n'est pas garanti d'être en vie dans le futur. Il serait préférable pour inclure l'essentiel des éléments de réponse ici, et de fournir le lien de référence.
- Veuillez ajouter les asnwer
InformationsquelleAutor Dexter
3

Il travaille dans Google Chrome lorsque vous ajoutez le !attribut important pour l'image de fond. Assurez-vous d'ajouter l'attribut d'abord, puis essayez à nouveau, vous pouvez le faire comme ceci:
```
.class-name {
background: url('your-image.png') !important;
}
```
Vous pouvez aussi utiliser ces utiles impression les règles et les mettre à la fin du fichier css:
```
@media print {
* {
    -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
    color-adjust: exact !important;  /*Firefox*/
  }
}
```
InformationsquelleAutor Hady El-Hady

Essayez ceci:

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

InformationsquelleAutor ashkufaraz

0

ensemble media="print"
```
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">
```
Référence
- Désolé, j'aurais expliqué. Le imprimer.css fonctionne bien et c'est le formatage de la page comme je le veux pour d'autres éléments sur la page. Mon seul problème est que je ne peux pas obtenir le logo du site image à afficher lors de l'impression.
- r u utilisation de type de support??
- pourquoi downvoted?? L'OP n'est pas question claire ..voir les commentaires
InformationsquelleAutor diEcho
0

Si vous utilisez Internet Explorer, c'est comment vous le faites:
- Allez au menu "Outils".
- Cliquez sur "Options Internet".
- Cliquez sur l'onglet 'Avancé'.
- Exercer un contrôle sur l'impression couleur d'arrière-plan et les images.
- Je ne peux pas trouver la case à cocher.
InformationsquelleAutor 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>

Ce sens de la CSS que vous avez posté, voir également ce site: https://defuse.ca/force-print-background.htm

InformationsquelleAutor Nasim Bahar

-3

Lorsque vous essayez d'impression personnalisés par le biais de la création d'un format d'impression directement avec java script et si il y a la balise est là, alors il ne sera pas imprimer en raison de navigateur intensément envoyer la demande à l'imprimante sans attente de chargement de l'image dans le cache.
Les bonnes pratiques d'ajouter image que vous souhaitez imprimer sur une page html et de faire de la visibilité faux.

InformationsquelleAutor Raj Kumar

Vous devez vous connecter pour publier un commentaire.