poner - input type color css

¿Cómo hago que Firefox imprima un estilo de color de fondo?

Question

Tengo un CSS simple:

#someElement {
    background-color:black;
    color:white;
}

Se ve bien en el navegador, pero cuando voy a imprimirlo en Firefox, aparece como texto negro sobre fondo blanco. Me imagino que esto es una especie de característica de ahorro de tinta, pero ¿hay alguna forma de evitarlo?

Answer 1

Es una configuración de navegador. No hay nada que puedas hacer en tu CSS. En Windows - File > Page Setup... > Print Background .

Answer 2

Tal vez no es la respuesta que está buscando, pero aquí va:

Prefiero agregar una hoja de estilos separada para imprimir la página. Por lo general, le conviene eliminar elementos como los menús de navegación, las migas de pan, los anuncios y, tal vez, hacer pequeños cambios en los márgenes, los bordes, los bordes y las fuentes en comparación con la hoja de estilos en pantalla.

Incluso pensar en forzar al usuario a llenar una página entera con tinta negra con texto blanco me parece tonto.

Para agregar una hoja de estilo de impresión por separado, agregue otra hoja de estilo al encabezado de su página.

<link rel="stylesheet" href="print.css" type="text/css" media="print">

Answer 3

Encontré una solución, es un poco hacky, pero con los pseudo-elementos CSS puedes crear fondos usando bordes gordos. Los bordes se imprimen incluso cuando "fondos de impresión" está desactivado, ¡solo hazlos realmente gruesos! Una nota, Firefox establece todos los colores de fuente blancos en negro, por lo que cuando creas un fondo negro falso, Firefox aún hace que el texto sea negro, lo que hace que el texto sea invisible. De todos modos aquí está:

El HTML:

<div class="redBox">
  <div class="content">Black on red</div>
</div>

El css:

.redBox {
  /* o no, does not work with print */
  background-color: red;
}

@media print {
  .redBox {
     position: relative;
     overflow: hidden; /* this might not work well in all situations */
  }
  .redBox:before {
     content: '''';
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     /* and here it is, the background color */
     border: 99999px red solid;
     z-index: 0; /* was required in my situation */
  }
  .redBox * {
    /* was required in my situation */
    position: relative;
    z-index: 1;
  }
}

Answer 4

Hay una solución simple para esto.

Para background-color , en lugar de usar:

background-color: red

Utilizar:

background-color: unset;
box-shadow: inset 0 0 0 1000px red /* 1000px is a random high 
                                     number that is definitely 
                                     larger than the box dimension*/

También para el color , en lugar de:

color: grey;

Utilizar:

color: unset;
text-shadow: 0 0 grey;

Puede restringirlos para que se impriman solo con @media print , ¡pero no es necesario!

Nota: A veces debes usar background-color: transparent; o color: transparent; si el color o el color background-color se heredan de los elementos principales.

Answer 5

Así es como lo hice funcionar en mi caso al agregar las dos líneas siguientes a la div específica. "@@ supports (-moz-appearance: meterbar)" es útil para agregar estilos específicos a Firefox.

-webkit-print-color-adjust: exacto; ajuste de color: exacto;

@@supports (-moz-appearance:meterbar) {
    .container {
        margin: 0;
        font-size: 0.85em;
        width: 100%;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}