html - 重复 css 图像作为内容

Question

我需要一个图像重复并且在屏幕上和打印时都可见。目前使用

body {
    background:url(images/confidential.png) repeat;
}

@media Print {
    body:before { 
         content: url(images/confidential.png);
         position: absolute;
         z-index: -1;
    }
}

打印时重复除外。建议？谢谢。

Answer 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>