css - 如何将图像放在文本框后面？

Question

我有this linked code , 它会创建一个带有重叠图像的透明文本框。但是，如何使图像位于文本框后面，并具有透明效果？现在，图像挡住了文本等。

谢谢。

    <div class="grid12-6">
<!-- start text box div -->
<div style="z-index:1;width: 75%; -webkit-border-radius: 35px 0px 35px 0px; -moz-border-radius: 35px 0px 35px 0px; border-radius: 35px 0px 35px 0px; background:rgba(0,120,0,0.5); padding: 25px 0px 25px 25px; -webkit-box-shadow: #B3B3B3 5px 5px 5px; -moz-box-shadow: #B3B3B3 5px 5px 5px; box-shadow: #B3B3B3 5px 5px 5px;">
<ul style="font-size: larger;color:#fff;">
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ul>
</div><!-- end text box div -->
    <div style="z-index:0;position: relative;top:-25px">
        <img src="http://placekitten.com/200/200" alt="" /></div>
</div>

Answer 1

我刚刚将 position: relative; 添加到您的文本框 div 上。

请记住，z-index 可能只在具有 position: relative | 的元素之间有用。绝对 |固定。

<div class="grid12-6">
<!-- start text box div -->
<div style="position: relative; z-index:1;width: 75%; -webkit-border-radius: 35px 0px 35px 0px; -moz-border-radius: 35px 0px 35px 0px; border-radius: 35px 0px 35px 0px; background:rgba(0,120,0,0.5); padding: 25px 0px 25px 25px; -webkit-box-shadow: #B3B3B3 5px 5px 5px; -moz-box-shadow: #B3B3B3 5px 5px 5px; box-shadow: #B3B3B3 5px 5px 5px;">
<ul style="font-size: larger;color:#fff;">
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ul>
</div><!-- end text box div -->
    <div style="z-index:0;position: relative;top:-25px">
        <img src="http://placekitten.com/200/200" alt="" /></div>
</div>

成功了。 Code here