Ich brauche ein Bild wiederholen und sowohl auf dem Bildschirm als auch während des Druckens sichtbar sein. BisherWiederholen von CSS Bild als Inhalt
body {
background:url(images/confidential.png) repeat;
}
@media Print {
body:before {
content: url(images/confidential.png);
position: absolute;
z-index: -1;
}
}
funktioniert mit Ausnahme der Wiederholung beim Drucken. Vorschläge? Vielen Dank.
die meisten Browser Demo. Aber image, SVG und Eigenschaft content macht es gut.
https://jsfiddle.net/k459wv6w/
<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="rainbow" patternUnits="userSpaceOnUse" width="300" height="300">
<image xlink:href="http://www.fnordware.com/superpng/pnggrad8rgb.png"
x="0" y="0" width="300" height="300">
</image>
</pattern>
</defs>
</svg>
<svg height="100%" width="100%" style="float:left" class="pattern-swatch">
<rect style="fill: url(#rainbow) #fff;" x="0" y="0" height="100%" width="100%"></rect>
</svg>
Dies scheint vielversprechend. Wie verschiebe ich es in den Hintergrund? Es sieht nicht so aus, als ob SVG Z-Indizes hat? – Shawn
Um zu verdeutlichen, habe ich eine Tabelle, die ich gerne füllen würde. – Shawn
@Shawn 'svg' Element kann Z-Achse verwenden, aber im Inneren kann es nicht. Es ist 2D-Leinwand haben keine Z-Achse. Beispiel: https://jsfiddle.net/k459wv6w/3/ – twxia
Ich bin mir nicht sicher, ob dies eine Option für Sie sein könnte. Aber auch wenn Sie versuchen, die Druckeinstellungen über CSS zu erzwingen, können verschiedene Browser ein- und ausgeschaltet werden, Check link for more info, daher haben Sie die Option, das Hintergrundbild explizit in zu setzen und es wie folgt zu formatieren:
.background {
width: 100%;
height: 100%;
position: absolute;
background: transparent url("http://www.fnordware.com/superpng/pnggrad8rgb.png") repeat scroll 0% 0%;
//background-repeat: repeat-x;
}
ich habe JsFiddle erstellt Standardverhalten der Hintergrunddruckfarben nicht Dieses
Die meisten Browser den Hintergrund zu ignorieren, wenn gedruckt wird, so dass in diesem Fall nur der Inhalt aus dem Körper :::
Verwendung SVG-Lösung (Füllmuster), wie die sich wiederholenden Bildhintergrund zu erreichen, bevor verwendet wird. Dies ist eine Browser-Einstellung, kein Problem mit Ihrem CSS. –
@MrLister Das ist der Sinn dieses CSS. Ich muss den Inhalt wiederholen. – Shawn
http://stackoverflow.com/questions/11242991/how-to-forcefully-print-background-image-in-html - dieser Beitrag kann Ihnen helfen – San