Como posso forçar os navegadores a imprimir imagens de fundo em CSS?


102

Esta pergunta foi feita antes, mas a solução não é aplicável no meu caso. Quero ter certeza de que certas imagens de fundo são impressas porque são parte integrante da página. (Eles não são imagens diretamente na página porque há vários deles sendo usados ​​como sprites CSS.)

Outra solução para a mesma questão sugere o uso list-style-image, que só funciona se você tiver uma imagem diferente para cada ícone, sem CSS sprites possíveis.

Além de criar uma página separada com os ícones embutidos, existe outra solução?

Respostas:


51

Você tem muito pouco controle sobre os métodos de impressão de um navegador. No máximo, você pode SUGERIR, mas se as configurações de impressão do navegador tiverem "não imprimir imagens de fundo", não há nada que você possa fazer sem reescrever sua página para transformar as imagens de fundo em imagens flutuantes de "primeiro plano" que por acaso estão atrás de outro conteúdo.


209

Com o Chrome e Safari você pode adicionar o estilo CSS -webkit-print-color-adjust: exact;ao elemento para forçar a impressão da cor e / ou imagem de fundo


4
Isso é incrível. Torna a vida muito mais fácil para os usuários / webkit do phantomjs
Jason

1
@MuneemHabib Não funciona no IE, na verdade, o único navegador compatível é o Chrome: developer.mozilla.org/en-US/docs/Web/CSS/…
Marco Bettiolo

isso funcionou para o cromo ... felizmente, neste caso, eu só precisava oferecer suporte ao wekkit ...
Davy

2
@DisgruntledGoat deve atualizar esta para ser a resposta correta, pois resolveu meu problema rapidamente (meu projeto no trabalho se concentra apenas no Chrome). Obviamente, não funciona para todos os navegadores, mas deve ser conhecido desde o início.
Brett84c

1
@ Brett84c: Discordo, pois é uma solução para um navegador apenas.
Kukeltje

84

Os navegadores, por padrão, têm a opção de imprimir cores de fundo e imagens desativadas. Você pode adicionar algumas linhas em CSS para contornar isso. Basta adicionar:

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

ya funciona bem, mas mozilla marca como fora do padrão Este recurso não é padrão e não segue os padrões. Não o use em sites de produção voltados para a Web: ele não funcionará para todos os usuários. Também pode haver grandes incompatibilidades entre as implementações e o comportamento pode mudar no futuro.
Qh0stM4N

3
Por que é !importantnecessário?

Funcionou para mim! Obrigado.
Nick Woodhams

color-adjustinfelizmente, não é compatível com o FireFox. Parece se aplicar apenas ao plano de fundo, não à colorpropriedade css. É relatado como um bug , sem muita atividade ou votos. Manter o fundo é inútil se a cor da fonte não for preservada, tornando-a ilegível.
Frédéric de

É uma boa solução. Lembre-se de que ele não funciona com o IE11 (eu sei!).
Rafael S. Fijalkowski

76

Encontrei uma maneira de imprimir a imagem de fundo com CSS. Depende um pouco de como seu plano de fundo está disposto, mas parece funcionar para meu aplicativo.

Essencialmente, você adiciona o @media print ao final de sua folha de estilo e altera ligeiramente o fundo do corpo.

Exemplo, se o seu CSS atual for assim:

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

No final da folha de estilo, você adiciona:

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

Isso adiciona a imagem ao corpo como uma imagem de "primeiro plano", tornando-a imprimível. Você pode precisar adicionar algum CSS adicional para fazer o z-indexapropriado. Mas, novamente, depende de como sua página é apresentada.

Isso funcionou para mim quando eu não conseguia fazer uma imagem de cabeçalho aparecer na visualização de impressão.


3
Essa foi uma solução incrível para o que eu precisava fazer, que era trocar um inline <img>(para RWD) por um diferente para @media print. A imagem da web estava em um fundo escuro, portanto, imprimir essa imagem não funcionava em papel branco e eu não queria forçar os usuários a imprimir um fundo escuro no cabeçalho. Perfeito!
JHogue

@JHogue - Obrigado! Que bom que ajudou você.
ckpepper02

4
Embora esta não seja uma resposta "correta". É MUITO mais útil do que a resposta aceita.
Xenologia

a resposta abaixo stackoverflow.com/a/15208258/915865 deve ser marcada, pois tem uma explicação melhor, imho
Kat Lim Ruiz

1
No firefox funcionava apenas se você usasse conteúdo interno: antes, como @ hanz answer
vaskort

18

O código abaixo funciona bem para mim (pelo menos para o Chrome).

Também adicionei alguns controles de margem e orientação de página. (Retrato, paisagem)

<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

Certifique-se de usar o atributo! Important. Isso aumenta drasticamente a probabilidade de seus estilos serem mantidos quando impressos.

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

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

Eu criei alguns relatórios simples de "impressão" para minha empresa usando esse método. Funciona no OS X Chrome / Safari e Windows 8 Chrome / IE (não tentei nenhuma outra plataforma).
nuts-n-beer de

3
Isso parece não ter efeito no Chrome, Firefox e Safari no Mac.
intcreator

Isso é exatamente o que eu precisava para aplicar o atributo a cada uso daquele elemento em particular e me deixar imprimir o documento apropriadamente. Obrigado!
johnny

7

Como @ ckpepper02 disse, a opção body content: url funciona bem. No entanto, descobri que, se você modificá-lo um pouco, poderá apenas usá-lo para adicionar uma imagem de cabeçalho usando o pseudo elemento: before, como segue.

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

Isso deslizará a imagem no topo da página e, pelo meu teste limitado, funciona no Chrome e no IE9

-hanz


5

Use elementos psuedo. Embora muitos navegadores ignorem as imagens de fundo, os elementos psuedo com seu conteúdo definido como uma imagem NÃO são tecnicamente imagens de fundo. Você pode então posicionar a imagem de fundo aproximadamente onde a imagem deveria ter ido (embora não seja tão fácil ou preciso quanto a imagem original).

Uma desvantagem é que, para que isso funcione no Chrome, você precisa especificar esse comportamento fora da consulta de mídia de impressão e torná-lo visível no bloco de consulta de mídia de impressão. Então, algo assim ...

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

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

A desvantagem é que a imagem geralmente será baixada em carregamentos de página normais, adicionando volume desnecessário. Você pode evitar isso usando apenas a mesma imagem / caminho que já usou para a imagem visível original.


1

está funcionando no google chrome quando você adiciona! atributo importante à imagem de plano de fundo, certifique-se de adicionar o atributo primeiro e tente novamente, você pode fazer assim

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

}


bom ponto de mencionar, resolvi meu problema junto com -webkit-print-color-ajustar: exato! importante;
czmarc

0

Você pode usar bordas para cores fixas.

 borderTop: solid 15px black;

e para o fundo gradiente você pode usar:

    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 propõe uma solução elegante, usando um marcador personalizado no lugar de uma imagem de fundo:

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

Incluindo isso em um

@media print {
}

bloco, sou capaz de substituir um logotipo branco sobre transparente na tela, renderizado como uma imagem de fundo, por um logotipo preto sobre transparente para impressão.


Esta é uma solução interessante, mas realmente não funciona se a imagem de fundo for muito maior do que o contêiner. (estende minha div)
Jabbamonkey

-1

Você pode fazer alguns truques como este:

<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>

No corpo da tag:

<img src="YOUR IMAGE URL" class="whater"/>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.