wake-up-neo.com

div Hintergrundfarbe in der Druckseite funktioniert nicht

Ich möchte eine div verwenden, die einen background-color hat, aber wenn ich die Seite drucke, erscheint sie weiß.

Wenn ich eine Tabelle mit <tr bgcolor="#333333"> erstelle, funktioniert sie auch nicht.

Wie kann ich eine Druckseite mit css und html erstellen?

Mein Code:

<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
   <tr bgcolor="#999999">
       <td align=right colspan=2><span style="font:bold 14px 'b nazanin';">Text</span></td>
   </tr>
</table>
htmlcssbackground-colorprint-preview
21
Ebad ghafoory

Ich würde die Methode von media query untersuchen, um ein Stylesheet auf den Ausdruck auszurichten. Ich glaube nicht, dass Sie einen Cross-Browser finden, mit dem Sie tun können, was Sie tun möchten (steuern, ob der Drucker des Benutzers einen Hintergrund druckt), ohne PDF-Dateien Ihres Inhalts zu verwenden, was möglicherweise nicht wünschenswert/machbar ist. Sie sollten jedoch in Erwägung ziehen, Ihre Druckstile speziell zu behandeln, und möglicherweise Hintergründe bei der Gestaltung der gedruckten Seite vermeiden.

http://www.w3.org/TR/css3-mediaqueries/

EDIT

Wenn Sie Ihren anderen Kommentar sehen, müssen Sie Ihrem Benutzer beibringen, wie der Hintergrund gedruckt werden soll und Sie einen einzelnen Benutzer haben. Siehe zum Beispiel in Firefox (Kontrollkästchen):

print backgrounds dialog Firefox

23
Jared Farrish

CSS: box-shadow: inset 0 0 0 1000px gold;

Funktioniert für alle Browser und für Tabellenzellen und -zeilen.

20
KDawg

Hintergrundfarben und -bilder werden standardmäßig nicht gedruckt.

Es ist eine Druckeroption, die Ihre Benutzer ändern könnten, aber Sie können sich nicht darauf verlassen, dass Ihre Benutzer dies wissen oder tun. Sie können dies nicht von der Webseite aus steuern (soweit ich weiß).

18
Marek Musielak

Hier ist etwas für mich gearbeitet, da ich ein Blockelement mit fester Größe verwendet habe. Das verwendete Bild ist 1px X 1px, muss jedoch auf die Größe der Box erweitert werden. Auf diese Weise drucken wir das Bild direkt anstelle der Hintergrundfarbe/des Bildes. 

<style type="text/css">
.outer {
    width: 200px;
    height: 80px;
    position: relative;
}
.outer .grayBg {
    position: absolute;
    left: 0;
    top: 0;
    height: 80px;
    width: 100%;
    z-index: 1
}
.inner {
    width: 100%;
    position: relative;
    z-index: 10
}
</style>


<div class="outer"><img src="grayBg.png" class="grayBg" />
  <div class="inner">Some text</div>
</div>
2
srinikolli

Sie können jedoch immer ein Bild dafür verwenden. Erstellen Sie ein Bild mit einer Breite von 1 Pixel und wiederholen Sie es so:

background: url('path/to/image.png') repeat-x;
0
Boyye