¿Cómo obtener una imagen de fondo para imprimir usando css?

Estoy usando el ASP Net Sprites package para crear CSS Sprites en mi sitio web.¿Cómo obtener una imagen de fondo para imprimir usando css?

Está funcionando, pero las imágenes que genera no aparecen cuando se imprime.

El código generado a nivel HTML es:

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

¿Cómo puedo conseguir que la imagen del logotipo que aparezca cuando un usuario imprime la página?

He intentado agregar esto en mi hoja de estilo print.css, pero que no funcionó:

#siteLogo 
{ 
    visibility: visible; 
}

El print.css está trabajando muy bien y se está formateando la página como yo quiero que de otra elementos en la página. Mi único problema es que no puedo mostrar la imagen del logotipo del sitio cuando se imprime.

Fuente

2011-05-10 Techboy

No puedes. Es una configuración de navegador y como se indica a continuación, no puede confiar en ella, por lo que debe usar etiquetas img. De todos modos, es una buena práctica usar etiquetas de imagen para imágenes (fotos, logotipos, etc.) e imágenes de fondo CSS para fondos (patrones repetitivos, etc.). –

La razón por la que quiero hacerlo es automatizar la generación y el uso de CSS Sprites. Tal vez deba usar una imagen independiente para el logotipo. – Techboy

@Johann a continuación ha publicado una solución de trabajo, realmente debería aceptarla. – Talon

Es responsabilidad del usuario y la configuración de su navegador para imprimir o no imprimir imágenes de fondo. Para evitar confiar en eso, coloque las imágenes directamente en el HTML con una etiqueta <img /> real.

Fuente

2011-05-10 12:25:36 Kon

+31

Ese es un comentario ridículamente inútil. Quiere decir que no puede usar CSS: coloque una etiqueta real en el HTML. – andygeers

conjunto media = "print"

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

Reference

Fuente

2011-05-10 12:21:37 diEcho

Lo siento, debería haber explicado . El print.css está funcionando bien y está formateando la página como quiero para otros elementos en la página. Mi único problema es que no puedo mostrar la imagen del logotipo del sitio cuando se imprime. – Techboy

@ r u using media type ?? – diEcho

¿por qué downvoted? OP no aclara la pregunta ..ver los comentarios – diEcho

Si utiliza Internet Explorer, así es como se hace:

Ir al menú 'Herramientas'.
Haga clic en 'Opciones de Internet'.
Haga clic en la pestaña 'Avanzado'.
Controle el color e imágenes de fondo de impresión.

Fuente

2011-07-04 11:49:15 kriti

No puedo encontrar la casilla de verificación. – aloisdg

Puede tener una propia consulta de medios para imprimir y usar: antes del selector con el atributo "contenido".

poner esto en la consulta de medios y va a insertar la imagen cuando intenta imprimir:

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

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

Fuente

2012-11-07 11:42:07 Charlie

funcionó, pero, ¿cómo podría hacer que la imagen se repita? – juanpastas

para Chrome y Safari se puede añadir lo siguiente en su CSS:

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

Desafortunadamente, para otros navegadores web, el usuario tiene que seleccionar manualmente la opción para imprimir imágenes de fondo (por ejemplo, para usuarios con IE 9, 10 y 11 tienen que hacer clic en el icono del engranaje -> Imprimir -> Configurar página, y activar la opción)

Fuente

2013-05-01 16:54:45 Johann

No puedo creer que esto no se haya marcado como la solución – Talon

¿por qué no es esta una solución aceptable? – Scott

@ScottWe Para empezar, no es estándar, no hay un equivalente para IE o Firefox. – Blazemonger

Su documento principal, importará 2 hojas de estilo, 1 para la pantalla y otra para la impresora. Puede ajustar con precisión la configuración de medios que necesita.

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

Aquí es la imagen de fondo se llama en su archivo css principal que se utiliza en los navegadores.

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

Y su truco de impresión utilizado por los navegadores cuando los usuarios inician el cuadro de diálogo de impresión. De modo que puede agregar la clase de impresión a su div y hacer que se imprima, o eliminarla si es necesario.

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

Nota: También puede utilizar la regla @media en lugar de importar archivos si se quiere evitar hacer una petición http adicional.

referencia a partir de: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html

Fuente

2013-07-03 06:58:46 Dexter

El enlace solitario se considera una respuesta deficiente (ver [eliminación de faq #]) ya que no tiene sentido por sí mismo y ** no se garantiza que el recurso objetivo esté vivo en el futuro **. [Sería preferible] (http://meta.stackexchange.com/q/8259) incluir aquí las partes esenciales de la respuesta y proporcionar el enlace de referencia. – j0k

Agregue el asnwer real – CloudyMarble

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

esto sentido de la CSS informados, también ver este sitio web: https://defuse.ca/force-print-background.htm

Fuente

2014-10-05 10:42:00

Prueba esto:

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

Fuente

2015-11-28 16:24:20 ashkufaraz

-2

cuando se está tratando impresión personalizada a través de la creación de formato de impresión directamente con el script java y si hay una etiqueta allí, entonces no se imprimirá porque el navegador enviará intensamente reques t a la impresora sin esperar a cargar la imagen en la caché. Por lo tanto, se recomienda agregar la imagen que desea imprimir en la página html y hacer que la visibilidad sea falsa.

Fuente

2017-07-03 13:27:39

Está funcionando en Google Chrome cuando agrega el atributo importante a la imagen de fondo. Asegúrese de añadir el atributo primero y luego tratar de nuevo, puede hacerlo de esta manera:

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

También puede utilizar estas reglas útiles de impresión y ponerlos al final del archivo CSS:

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

Fuente

2017-09-19 14:13:37

¿Cómo obtener una imagen de fondo para imprimir usando css?

Respuesta

Cuestiones relacionadas