重复css图像作为内容答案

【问题标题】：Repeating css image as content重复css图像作为内容
【发布时间】：2016-10-11 14:51:21
【问题描述】：

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

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

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

在打印时除了重复之外工作。建议？谢谢。

【问题讨论】：

大多数浏览器在打印时会忽略背景，因此在这种情况下只使用来自 body::before 的内容。这是浏览器设置，不是你的 css 的问题。
@MrLister 这就是这个 CSS 的重点。我需要让内容重复。
stackoverflow.com/questions/11242991/… - 这篇文章可能对你有所帮助
@Shawn 你不懂；这是一个浏览器问题。这意味着您无法使用 CSS 来控制它。
@JoostS 好主意，有什么方法可以让它像普通背景图像一样剪辑？

标签： html css asp.net

【解决方案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>

【讨论】：

这看起来很有希望。如何将其移至背景？ SVG 好像没有 Z 索引？
澄清一下，我有一张桌子，我想用这个来填充。
@Shawn svg 元素可以使用 z 轴，但内部不能。它的 2d 画布没有 z 轴。示例：jsfiddle.net/k459wv6w/3
如果它只填满桌子就完美了，但我可以忍受这个。感谢您帮助解决此浏览器问题。
@Shawn 抱歉，一开始真的不明白你的意思。您可以使用position: absolute 来实现您的目标。很高兴为您提供帮助：D

【解决方案2】：

我不确定这是否适合您。但是，即使您尝试通过 CSS 强制打印设置，不同的浏览器也可以打开和关闭不同的设置，Check link for more info，因此您可以选择将背景图像显式放入 <img> 标记并设置如下样式：

.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;
}

我创建了JsFiddle 来演示这个

【讨论】：