Alterar uma imagem para texto via CSS para a impressão?

Question

Vamos dizer que eu tenho um banner em uma página web que estou prestes a imprimir. Em vez de desperdício de tinta de alguém imprimir todo o bloco da imagem, há uma maneira via CSS para substituir a imagem com texto de tamanho H1?

Answer 1

Você poderia colocar um elemento h1 e uma imagem no mesmo lugar na fonte, e ter a display:none imagem CSS para mídia impressa, e tem o conjunto h1 para display:none para a mídia de tela.

Answer 2

Eu normalmente apenas adicionar a seguinte a minha folha de estilo:

.nodisplay
{
    display: none;
}

@media print {
    * {
        background-color: white !important;
        background-image: none !important;
    }
    .noprint
    {
        display: none;
    }
}

E, em seguida, atribuir o noprint classe para elementos que não deve ser impresso:

<div class="noprint">

</div>

E para o seu exemplo, algo como o seguinte deve funcionar:

<img src="logo.png" class="noprint" ...>
<h1 class="nodisplay">Text Logo</h1>

Answer 3

Bryan, normalmente em coisas como logotipos eu uso substituição de imagem para o gráfico de qualquer maneira para o logotipo em si é realmente em uma tag H1. Então, em minha folha de estilo de impressão. Eu faço algo assim ...

h1#logo a, h1#home-logo{
    text-indent: 0 !important;
    background-image: none !important;
    font-size: 1.2em !important;
    display: block !important;
    height: 1em !important;
    width: 100% !important;
    text-decoration: none !important;
    color: black !important;
}

que remove a substituição de imagem e mostra o texto. Certifique-se, claro, que você chama este estilo separadamente usando media="print".

Answer 4

Adicionando a solução de Adão: Se o texto é fixa ( "head bandeira estava lá" e não "anúncio para tal e tal estava lá"), você pode usar : antes ou: after pseudo-elementos para inserir texto em vez de ter o texto pré-inserido no HTML.

I faz o seu HTML mais leve se você estiver substituindo muitas imagens com o mesmo texto.

Eu tenho que dizer que eu não gosto desse recurso CSS, mas é lá se você quiser usá-lo.