CSS @media print funktioniert nicht

Ich beschäftige mich nun seit Stunden nun, warum der @media print nicht funktioniert, Suche ich über Google auch auf diese Seite und alles hat nichts geholfen, also warum ich Stelle diese Frage.
Ich Teste es auf Google-chrome-print-preview (Strg-p), aber ich habe auch gedruckte Seite und die bleibt leer.

Ich versuchen würde zu machen, eine separate css-Datei und auch einen embedded css-style in die Seite.

Hier ist mein code

Header

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

HTML

<div id="bruikleenovereenkomst">
    <div id="blo_header">

    </div>

    <div id="blo_side_top"></div>
    <div id="blo_side_bottom"></div>
</div>

Normalen CSS-Stilen

div#bruikleenovereenkomst {
    width:595px;
    height:842px;
    background-color:#fff;
    position:relative;
}

div#blo_header {
    width:100%;
    height:125px;
    background-color:#FBE983;
    z-index:9
}

div#blo_side_top {
    width:57px;
    height:420px;
    background-color:#B6CAE5;
    position:absolute;
    right:0;
    top:0;
    z-index:99;
}

div#blo_side_bottom {
    width:57px;
    height:420px;
    background-image:url(../images/leaflet.png);
    background-repeat:no-repeat;
    position:absolute;
    right:0;
    bottom:0;
    z-index:99;
}

CSS-Druckformate ("drucken".css) Hinweis: der div#bruikleenovereenkomst ist nur ein schwarzer block zum testen.

@media print{

    body {
        margin:0;
    }

    h1#logo {
        display:none;
    }

    ul#menu {
        display:none;
    }

    div#bruikleenovereenkomst {
        width:100%;
        height:500px;
        background-color:#000;
    }

    div#blo_header {
        display:none;
    }

    div#blo_side_top {
        display:none;
    }

    div#blo_side_bottom {
        display:none;
    }

}

Alles, was ich bekommen beim drucken nur eine leere Seite.

vielleicht ist der hintergrund nicht gedruckt werden? Versuchen Sie, einige echte Inhalte gibt es und sehen, ob es funktioniert.
Aber ich brauche eine farbig gedruckte Seite.... Gibt es eine Möglichkeit, dass ich Ihnen geben kann, divs eine Farbe für den Druck ?
Lesen der anderen Antworten auf stackoverflow scheint das eine Einstellung im browser, die Sie nicht überschreiben kann mit css.
... ja, ich fand es jetzt, im so sorry, ich dachte, es war nur der @media print nicht funktioniert, aber es war nur die background-color nicht funktioniert.
Sie können schalten Sie das drucken von Hintergrundfarben/Bilder in Ihren browser-Optionen. Es ist nicht etwas Sie können aus der Ferne überschreiben. Wenn Sie Ihre Farben transportieren eine wichtige information und Sie können sich nicht darauf verlassen, dass Ihre Benutzer zu aktivieren, die option, die Sie brauchen, um etwas anderes als hintergrund Farben zu transportieren, Informationen. Unabhängig von Druck: Sie sollte nicht mit Farben allein zum transport von Informationen, die sowieso für eine gute Erreichbarkeit. Nicht jeder kann Farben sehen!

InformationsquelleAutor Julez | 2013-07-30

21

Wenn Sie mit @media print, müssen Sie hinzufügen !wichtig ist im Stile, oder die Seite, wird das element der inline-Stile, die eine höhere Priorität haben.

E. g.
```
<div class="myelement1" style="display:block;">My div has an inline style.</div>
```
In @media print, hinzufügen !wichtig und ein Gewinner
```
@media print {
   .myelement1, .myelement2 { display: none !important; }
}
```
Hmm. !important vielleicht ein bisschen viel für dieses, da es Stile, die viel schwieriger zu überschreiben.
Wenn das !wichtig ist nur für @media print, sollte es keine Auswirkungen auf die normale Gestaltung der Seite. Es ist nicht elegant, aber wenn Sie haben inline-styles, Sie müssen einen Weg zu überschreiben, wie Sie sind nicht sehr elegant, sich selbst.
Naja, ich kann nicht widersprechen, auf inline-styles, offensichtlich.
+1, um Sie Mann, Sie !wichtig war das Geheimnis, das ich war fuchsteufelswild wie das ändern von schriftart-Größen wie 500%, um zu versuchen und zwingen einen Wechsel. Danke für den Tipp!

InformationsquelleAutor Richard
14

Erste, ich würde versuchen, ein Leerzeichen nach dem drucken. Kann nicht einen Unterschied machen, aber.....
```
@media print {
     /*print css here*/
}
```
Nächsten, drucken im Browser in der Regel ignoriert hintergrund-Farben. Versuchen Sie es mit 'box-shadow'....
```
@media print {
     #bruikleenovereenkomst {
         width: 100%;
         height: 500px;
         box-shadow:  inset 0 0 0 1000px #000;
     }
}
```
Smashing Magazine hat einige hervorragende Hinweise: http://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/
Beachten Sie, dass Sie reden über drucken aus einem Webkit-browser (Chrome oder Safari, zum Beispiel), und der Versuch den Drucker zu zwingen, machen die Farben, wie Sie erscheinen auf dem Bildschirm durch Verwendung eines separaten Medien-Abfrage.....
```
@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}
```
Hoffe, das hilft!

war auf der Suche nach background-color : '), kein Wunder, dass ich nicht sehen, die änderung.

InformationsquelleAutor Nostalgia80

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.