CSS/SECS/bootstrap :: anular los ajustes de impresión en bootstrap :: cambio de fondo:transparente ! importante a un color

Tengo un problema con el bootstrap CSS/imprimir.

En bootstrap CSS (reset.css) todo está despejado para la impresión

@media print {
  * {
    text-shadow: none !important;
    color: black !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

Pero tengo que imprimir varias líneas en color. Mi tabla tiene este aspecto:

<div class="container">
    <div id="task-summary">
        <div id="process-summary">
            <table class="table table-condensed">
                <tbody>
                    <tr class="success">
                        <td>

Me incrustadas esta en mi código, pero no funciona:

@media print {

  #task-summary{
    .success{
      background-color: #DFF0D7 !important;
    }
  }
}

Ya he probado si el css se exceptúa mediante display: none .. funciona (no se muestra) y parece estar en el lugar correcto.

¿ Alguien tiene una idea de cómo puedo reemplazar el bootstrap css comando, sin necesidad de editar el reset.css de bootstrap?

  • Su navegador puede estar tratando de ser inteligente y negarse a imprimir colores de fondo. Compruebe la configuración de su navegador.
  • Su configuración del navegador del usuario se omiso de esto, ver esta respuesta: stackoverflow.com/a/3894013/1064286
  • gracias sevenseacat, me has dado la dirección correcta… arreglado para chrome7safari con -webkit-impresión del color-ajuste:exacto; y ahora google para encontrar una solución para que en IE
  • Revise su arribazones…
InformationsquelleAutor jabbawock | 2013-03-27

2 Kommentare

  1. 5

    Yo tenía el mismo problema. Al imprimir la página de la background-color: ...; opción no funciona en las filas de la tabla. Cambiar el CSS Selector para:

    @media print {
    
      #task-summary .success td {
        background-color: #DFF0D7 !important;
    
        /* add this line for better support in chrome */ 
        -webkit-print-color-adjust:exact;
      }
    }

    Todo debería funcionar después de este cambio.

    • Fue el «-webkit-impresión del color-ajuste:exacto;» la línea que tiene este trabajo para mí.
  2. 2
    @media print {
        .success {
          background-color: #DFF0D7 !important;
        }    
    }

    O

    @media print {
        #task-summary .success {
          background-color: #DFF0D7 !important;
        }  
    }

    O

    @media print {
        #task-summary > #process-summary .success {
          background-color: #DFF0D7;
        }
    }
    • si eso no funciona… lo puso en el <head>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea