Es gibt keine Möglichkeit, Hintergrundfarben zu drucken, ohne manuell eine Einstellung in Ihrem Browser vorzunehmen. Für manche Menschen ist dies jedoch keine Option. Die beste Lösung, die ich finden konnte, ist ziemlich unelegant. Anstatt "background-color" zu verwenden (das nicht gedruckt wird), sollten Sie ein div-Tag mit einem großen farbigen Rahmen erstellen. Die Sache ist die, dass farbige Rahmen korrekt gedruckt werden können. Legen Sie dann an der Stelle, an der die hervorgehobene Farbe angezeigt wird, ein weiteres div-Tag mit dem Text darauf an. Nicht sehr elegant, aber es funktioniert.
Es ist am besten, sowohl das Text-Div als auch das Highlight-Div innerhalb eines dritten Divs zu platzieren. Die inneren Divs sollten die Position "absolut" haben und das äußere Div die Position "relativ". Dieser Beispielcode wurde sowohl in Firefox als auch in Chrome getestet:
<style type="text/css">
#outer_box {
position: relative;
border: 2px solid black;
width: 500px;
height:300px;
}
#yellow_highlight {
position: absolute;
width: 0px;
height: 30px;
border-left: 300px;
border-color: yellow;
border-style: solid;
top: 0;
left: 0px
}
#message_text {
position: absolute;
top: 0;
left: 0px;
}
</style>
<body>
<div id="outer_box">
<div id="yellow_highlight"> </div>
<div id="message_text">hello, world!</div>
</div>
</body>
