Problemas de impressão CSS @media com cor de fundo;

176

Eu sou novo aqui nesta empresa e temos um produto que usa quilômetros de css. Eu estou tentando fazer uma folha de estilo de impressão para a nossa aplicação, mas estou tendo problemas com background-colorno @media print.

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

Tudo o resto funciona, eu posso modificar as bordas e coisas do tipo, mas background-colornão aparecem na impressão. Agora entendo que vocês podem não ser capazes de responder à minha pergunta sem mais detalhes. Eu estava curioso para saber se alguém já teve esse problema ou algo semelhante antes.

css media-queries Weston Watson
fonte

Bem, ele passa o Validador CSS do W3C ( jigsaw.w3.org/css-validator ). Isso é estranho

GôTô

Isso não deve ser mais um problema. Eu vim para esse problema porque tinha uma página de inicialização e a inicialização tem uma @media printconsulta que remove as cores de fundo das tabelas (por exemplo, faixas).

Martin Thoma 22/09

@MartinThoma Como você resolveu o problema? Você removeu o CSS do modelo de boostrap?

EduLopez

242

Se um usuário tiver "Imprimir cores e imagens de plano de fundo" desativadas nas configurações de impressão, nenhum CSS substituirá isso, portanto, sempre leve em conta isso. Esta é uma configuração padrão .

Uma vez definido, para imprimir cores e imagens de plano de fundo, o que você tem lá funcionará.

Pode ser encontrada em diferentes locais. No IE9beta, ele é encontrado em Imprimir-> Opções da página em Opções de papel

No FireFox, está na Configuração da página -> guia [Formato e opções] em Opções.

Ryan Ternier
fonte

10

ótimo, você me salvou horas de mexer no meu cérebro com esse CSS.

Weston Watson

162

Com o Chrome e o Safari, você pode adicionar o estilo css "-webkit-print-color-Adjust: exact;" o elemento a força imprimir a cor de fundo e / ou imagem

Marco Bettiolo

11

! Não @MarcoBettiolo não parecem funcionar na mais recente webkit constrói, importante faz no entanto

Hedde van der Heide

2

A adição de! Important à regra também resolveu isso para mim.

Thiago Duarte

14

Para expandir isso, adicionei ajuste de cor: exato; para FF funcionar. Portanto, meu código completo é*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

BitBug 18/08/19

252

Para ativar a impressão em segundo plano no Chrome:

body {
  -webkit-print-color-adjust: exact !important;
}

drolex
fonte

7

Isso parece ter resolvido meu problema com a impressão de uma tabela com cores de linha alternativas.

Victor J. Garcia

Certifique-se de usar a caixa correta no caminho da imagem, pois a caixa de diálogo de impressão do Chrome não carrega as imagens na primeira tentativa. Isso acontece apenas no caso de o URL da propriedade da imagem de plano de fundo não corresponder ao invólucro do nome da pasta física. (Reportado na versão 48.0.2564.109 m)

MPaul 10/02

3

o que é o suplente no Firefox e IE

Shan Khan

5

Uma observação para futuros viajantes no tempo: você pode querer usar color-adjust.

Jun

@ КонстантинВан não é suportado no Chrome a partir de abril de 2019. Esta é a documentação do Firefox.

Thomas

82

Entendi:

CSS:

box-shadow: inset 0 0 0 1000px gold;

Funciona para todas as caixas - incluindo células da tabela !!!

(Se você acredita no arquivo de saída da impressora em PDF ..?)
Testado apenas no Chrome + Firefox no Ubuntu ...

T4NK3R
fonte

5

Você pode adicionar suporte ao IE8 e IE9 com

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */

Se você deseja que suas imagens de sprite fiquem visíveis, use a técnica img / clip css-tricks.com/css-sprites-with-inline-images , que fornecerá imagens no IE9 e FF ( não IE8 embora)

emik

2

Funciona muito bem em navegadores normais, mas não no IE, mesmo com a sugestão do @evami.

Woz1 de

@woz Estou funcionando em um projeto com o IE8 / 9. O gradiente (assim como a sombra da caixa) adiciona um elemento de plano de fundo extra que não é eliminado pela redefinição forçada do navegador. você se importaria de compartilhar seu css?

emik

2

Isso não parece funcionar com o Chrome mais recente (60).

swervo

1

Isso falha para mim no Chrome. Estou usando 69. Isso sugere que ele foi quebrado pelo menos desde 60 (conforme comentário do @ swervo).

Iconoclast

34

Tente isso, funcionou para mim no Google Chrome:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>

MAXE
fonte

22

-webkit-print-color-adjust: exact; sozinhois Not enough você tem que usar!important com o atributo

esta é a pré-visualização da impressão no chrome depois de eu adicionar !importanta cada background-colore coloratribuir em cada tag

e isso está imprimindo a visualização no chrome antes de adicionar!important

Agora, para saber como inject !importantdividir o estilo, verifique esta resposta. Não consigo injetar um estilo com uma regra "! important"

Basheer AL-MOMANI
fonte

Talvez seja porque você já possui uma folha de estilo @print que redefine a cor do plano de fundo.

Niccolo M.

AMD! está funcionando, mas como isso está funcionando? Você pode explicar, por favor.

Rahim.nagori 19/03/19

1

Essa é a única solução que funcionou para mim até agora. <div style = "- webkit-print-color-ajuste: exata importante; background-color: red importante;!"> ... </ div>

Thomas

10

Duas soluções que funcionam (pelo menos no Chrome moderno - ainda não foram testadas):

! important direito na declaração css regular funciona (nem mesmo na impressão @media)
Use svg

yar1
fonte

6

! important resolve o problema em todos os navegadores modernos, desde que a opção "Imprimir cores e imagens de plano de fundo" esteja ativada.

Chris Hynes

2

! important também funciona sem a intervenção do usuário se você o usar junto com body {-webkit-print-color-Adjust: exact; } (conforme comentário acima)

yar1

2

Descobri que, se eu uso color-adjustou a variante do webkit, não preciso de fato da regra importante.

Kasapo

7

Se você deseja criar páginas "amigáveis para a impressora", recomendo adicionar "! Important" ao seu CSS de impressão do @media. Isso incentiva a maioria dos navegadores a imprimir suas imagens de fundo, cores etc.

EXEMPLOS:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

nozes-n-cerveja
fonte

6

Há outro truque que você pode fazer sem ativar a opção de borda de impressão mencionada em outras postagens. Como as bordas são impressas, você pode simular cores de fundo sólidas com este hack:

.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}

Ative-o adicionando a classe ao seu elemento:

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

Embora isso precise de um código extra e de alguns cuidados extras para tornar as cores de fundo visíveis, ainda é a única solução conhecida por mim.

Observe que esse hack não funcionará em outros elementos que não sejam display: block;ou display: table-cell;, por exemplo, <table class="your-background">e <tr class="your-background">não funcionará.

Usamos isso para obter cores de plano de fundo em todos os navegadores (ainda, é necessário o IE9 +).

núcleo
fonte

1

é um truque maluco, mas pelo menos força alguma forma de cor de fundo, independentemente das configurações de impressão. brilhante, obrigado.

Brad Zacher

6

Para o chrome, usei algo assim e funcionou para mim.

Dentro da tag body,

<body style="-webkit-print-color-adjust: exact;"> </body>

Ou, para um elemento em particular, digamos que se você possui uma tabela e deseja preencher um td, ou seja, uma célula,

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

Aamir Shaikh
fonte

5

Apesar do !importantuso geralmente desaprovado, este é o código incorreto no bootstrap.cssqual impede que as linhas da tabela sejam impressas background-color.

.table td,
.table th {
    background-color: #fff !important;
}

Vamos supor que você esteja tentando estilizar o seguinte HTML:

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

Para substituir esse CSS, coloque a seguinte regra (mais específica) em sua folha de estilo:

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

Isso funciona porque a regra é mais específica que o padrão de autoinicialização.

The Aelfinn
fonte

Depois de horas pesquisando, encontrei esta resposta. Entrei e eliminei as falas do Bootstrap.css e do WHAM! Cores no fundo imprimível!

Mighty Ferengi

1

Obrigado! Finalmente, esta é a resposta que me colocou em funcionamento, mas eu precisava adicionar: body {-webkit-print-color-Adjust: exato! Importante; }

Ocean Airdrop

3

Encontrei esse problema, porque tive um problema semelhante ao tentar gerar um PDF a partir de uma saída html no Google Apps Script, onde as cores de plano de fundo também não são "impressas".

As soluções -webkit-print-color-adjust:exact;e !important, claro, não funcionaram, mas o box-shadow: inset 0 0 0 1000px gold;funcionou ... ótimo hack, muito obrigado :)

logol
fonte

2

Pensei em adicionar uma ajuda recente e relevante de 2015 a partir de uma experiência recente em impressão CSS.

Conseguiu imprimir planos de fundo e cores, independentemente das configurações da caixa de diálogo de impressão.

Para fazer isso, tive que usar uma combinação de ! Important & -webkit-print-color-Adjust: exato! Important para obter plano de fundo e cores para imprimir corretamente.

Além disso, ao declarar cores, descobri que as áreas mais teimosas precisavam de uma definição diretamente para o seu alvo. Por exemplo:

<div class="foo">
 <p class="red">Some text</p>
</div>

E seu CSS:

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */

Jonathan
fonte

2

Testado e funcionando no Chrome, Firefox, Opera e Edge até 2016/10. Deve funcionar em qualquer navegador e sempre deve ter a aparência esperada.

Ok, fiz um pequeno experimento em vários navegadores para imprimir cores de fundo. Basta copiar, colar e divirta-se!

Aqui está uma página HTML imprimível completa para inicialização:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>

Heroselohim
fonte

1

A melhor "solução" que encontrei é fornecer um botão ou link destacado "Imprimir", que abre uma pequena caixa de diálogo explicando de forma audaciosa, breve e concisa que eles precisam ajustar as configurações da impressora (com uma instrução de ponto de marcador ABC 123) para permitir o fundo e impressão de imagens. Isso tem sido muito bem sucedido para mim.

alano
fonte

1

Em alguns casos (blocos sem nenhum conteúdo, mas com fundo), ele pode ser substituído usando bordas, individualmente para cada bloco.

Por exemplo:

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

Gedeon
fonte

0

Você pode usar a tag canvase "desenhar" o plano de fundo, que funciona no IE9, Gecko e Webkit.

Thomas Lecavelier
fonte

0

Se você não se importa em usar uma imagem em vez de uma cor de fundo (ou possivelmente uma imagem com sua cor de fundo), a solução abaixo funcionou para mim no FireFox, Chrome e até no IE sem nenhum problema. Defina a imagem em algum lugar da página e oculte-a até que o usuário imprima.

O html na página com a imagem de plano de fundo

<img src="someImage.png" class="background-print-img">

O CSS

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}

ksealey
fonte

Tomei sua abordagem e tentei fazê-la funcionar no IE11, mas, infelizmente, não funcionou. Isso foi até eu colocar um !importantvalor em cada atributo da minha classe, que o fez funcionar.

Sal Alturaigi

0

Você não definir abackground-color interior do estilo de impressão. Basta definir o atributo no arquivo css normal e ele funciona bem :)

Confira este exemplo: O melhor modelo HTML de impressão com cabeçalho e rodapé

Demo: o melhor modelo de impressão em HTML com demonstração de cabeçalho e rodapé

Dryden Williams
fonte

0

tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

Funciona no Chrome e Edge

Vasily Ivanov
fonte

Problemas de impressão CSS @media com cor de fundo;

Respostas: