css - 带有背景图像的 div 内的文本叠加图像？

Question

有什么方法可以在 section 和文本之间获取图像吗？所以我想在最低层为 section 设置背景，然后是图像，然后是覆盖图像的文本。我试着弄乱 z-index 但我无法让它工作。如果我取出 section 及其背景，it works as it should .但是 section 标签必须作为该部分的背景。

fiddle :http://jsfiddle.net/y9ywL1gx/1/

HTML

<section>
    <div class="block">
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

        <img src="http://img2.tvtome.com/i/u/ac51b5ad45b24475c4667f74aefdc9a5.png">

    </div>
</section>

CSS

section {
    background: url("http://subtlepatterns.com/patterns/symphony.png") repeat;
}
div.block {
    position: relative;
}

img {
    position: absolute;
    top: 0;
    z-index: -1;
}

澄清一下，现在是:南方公园图像 --> 部分背景 --> 文本。我希望它是:section background --> south park image --> text

Answer 1

我认为这就是您想要的:http://jsfiddle.net/y9ywL1gx/5/

尝试重新排序元素而不是使用 z-index。