在HTML/CSS中,你可以像在后台一样重复前景中的图像吗？

Question

这是我的CSS

.test {
  background-image:url('images/smiley.gif');
  background-repeat:repeat;
}

这是我的HTML:

<div class="test" id="xyz">some code which should come background to image</div>

我写的代码设置了背景图像.

但我想在文本的顶部放置一个图像,而不是在它后面,以便它覆盖文本.(我也希望它自动重复填充元素,可以是任何大小.)

我怎样才能做到这一点？

Answer 1

有趣的任务。我认为如果您\xe2\x80\x99 愿意放入额外的 HTML 元素，这应该可以做到。（或者，使用.test:before代替.test .foregroundImage，如Georges\xe2\x80\x99 答案中所示）。

\n\n

超文本标记语言

\n\n

<div class="test" id="xyz"><span class="foregroundImage"></span>some code which should come background to image</div>\n

\n\n

CSS

\n\n

.test {\n    position: relative;\n}\n\n.test .foregroundImage {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  height: auto;\n  left: 0;\n  right: 0;\n  width: auto;\n  background-image:url(\'images/smiley.gif\');\n  background-repeat:repeat;\n}\n

\n\n

有关工作示例，请参阅http://jsfiddle.net/RUJYf/ 。

\n