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 | absolute | fixed的元素之间有用。

<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

Answer 2

试试这个：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .inputBox{
          background-image:url('bg.png');
          background-repeat:repeat-y;
          padding-left:20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="inputBox">
            <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>
   </form>
</body>
</html>

Answer 3

试试这个：

DEMO

UPDATED DEMO

<div class="img_destination">

      <img src="<?php echo SITE_URL?>/lib/skins/gsm/images/featured_destination/gcfv.png" alt="" />

    <h2 id="featured_destination"><span class="bold">>> Explore Fuerteventura</span><span class='spacer'></span><span class='spacer'></span>The island of natural beauty</h2>

</div><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="" style="height: 100px;margin-top: 15%;" /></div>
</div>

更新的查询：

 <div style="z-index:1;width: 75%; -webkit-border-radius: 35px 0px 35px 0px; -moz-border-radius: 35px 0px 35px 0px;margin-top: 20px;; 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;">
    </div>

Answer 4

您可以将背景图像添加到div样式：

<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; 
background-image: url(http://placekitten.com/200/200); background-repeat: no-repeat;">
<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>
</div>

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

4 个答案: