Question

有没有办法在section和文字之间获取图片？所以我希望section的背景位于最低层，然后是图像，然后是覆盖图像的文本。我试着弄乱z-index，但我无法让它发挥作用。如果我取出section及其背景，it works as it should。但是section标记必须作为该部分的背景。

小提琴：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;
}

现在澄清一下：south park image --> section background --> text。我希望它是：section background --> south park image --> text

Answer 1

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

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

Answer 2

<强> jsFiddle demo

只需在您的HTML中设置您的图片之前内部div并且不要使用z-index: -1; !!

<section>
    <div class="block">        
        <img src="south.png"/>       <!-- respect natural Z- order -->
        <div>Lorem Ipsum.</div>
   </div>
</section>

CSS：

section   { background: url("pattern.png"); }
.block div{ position: absolute; top:0; }

_{注意：如果你想让内部图像吻合使用}

.block img{ vertical-align:middle; }

文本覆盖图像内的div与背景图像？

2 个答案: