我需要一个图像重复并且在屏幕上和打印时都可见。目前使用
body {
background:url(images/confidential.png) repeat;
}
@media Print {
body:before {
content: url(images/confidential.png);
position: absolute;
z-index: -1;
}
}
打印时重复除外。建议?谢谢。
最佳答案
大多数浏览器的默认行为是不打印背景颜色。
但是 image
、SVG
和属性 content
做得很好。
使用SVG解决方案(填充图案)来实现像重复图像背景:
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>
关于html - 重复 css 图像作为内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37751583/