Question

我正在尝试在图像上放置文字。我在div上设置了z-index，但是在我将位置设置为绝对值之前，这并没有做任何事情。

<script>
function SwitchActiveDiv() {
    $("#SummaryDiv").css('display', 'none');
    $("#DetailsDiv").css('display', 'inline');
}
function SwapOpenImage(img) {
    var ToImage = $(img).attr('src').substring($(img).attr('src').lastIndexOf('/'));
    ToImage = ToImage.replace('closed', 'open');

    var FromImage = $("#OpenImage").attr('src').substring($(img).attr('src').lastIndexOf('/'));
    FromImage = FromImage.replace('open', 'closed');

    var OpenImageSrc = $("#OpenImage").attr('src');
    OpenImageSrc = OpenImageSrc.substring(0, OpenImageSrc.lastIndexOf('/')) + ToImage;

    var CloseImageSrc = $(img).attr('src');
    CloseImageSrc = CloseImageSrc.substring(0, CloseImageSrc.lastIndexOf('/')) + FromImage;

    $("#OpenImage").attr('src', OpenImageSrc);
    $(img).attr('src', CloseImageSrc);
}
</script>
<div id="SummaryDiv" style="width: 100%;">
<table>
<tr>
<td style="width: 712px;">
    <img src="~/media/C2MAssets/GettingStartedIntro/change-image.jpg" alt="" onclick="javascript:SwitchActiveDiv();" />
</td>
<td style="padding-left: 3px;">
    <img src="~/media/C2MAssets/GettingStartedIntro/family-image.jpg" alt="" onclick="javascript:SwitchActiveDiv();" />
</td>
<td style="padding-left: 3px;">
    <img src="~/media/C2MAssets/GettingStartedIntro/lifestyle-image.jpg" alt="" onclick="javascript:SwitchActiveDiv();" />
</td>
<td style="padding-left: 3px;">
    <img src="~/media/C2MAssets/GettingStartedIntro/play-image.jpg" alt="" onclick="javascript:SwitchActiveDiv();" />
</td>
</tr>
</table></div>
<div id="DetailsDiv" style="width: 100%; display: none;">
<table>
<tr>
<td rowspan="3">
    <img id="OpenImage" src="~/media/C2MAssets/GettingStartedDetails/change-open.jpg" alt="" />
    <div style="z-index: 20; left: 800px; top: 330px; position: relative;">
        <p style="font-family: Helvetica Neue; font-size: 35px; font-weight: bold; color: #ffffff;">Ready for an<br/> <i>Upgrade?</i></p>
    </div>
</td>
<td cellpadding="0" cellspacing="0">
    <img id="ClosedImage1" src="~/media/C2MAssets/GettingStartedDetails/family-closed.jpg" alt="" onclick="javascript:SwapOpenImage(this);" />
</td>
</tr>
<tr>
<td>
    <img id="ClosedImage2" src="~/media/C2MAssets/GettingStartedDetails/lifestyle-closed.jpg" alt="" onclick="javascript:SwapOpenImage(this);" />
</td>
</tr>
<tr>
<td>
    <img id="ClosedImage3" src="~/media/C2MAssets/GettingStartedDetails/play-closed.jpg" alt="" onclick="javascript:SwapOpenImage(this);" />
</td>
</tr>
</table></div>

然后当我设定位置时，它有点起作用。最初，顶部div不可见，然后jquery启用它。当顶部div被加入时，文本div仍然不可见，并且在激活某些jquery以替换文本应该结束的图像之后不会变得可见，然后它变得可见。

Answer 1

容器需要相对定位，而带有文本的div必须是绝对的。

试试这个：

HTML：

<table border="1">
    <tr>
        <td>Placeholding text</td>
        <td>Another placeholder</td>
    </tr>

    <tr>
        <td>Image next to me</td>
        <td class="img-container">
            <img src="http://lorempixel.com/400/200" />
            <span class="overlay-text">
                Text goes here
            </span>
        </td>
    </tr>
</table>

CSS：

.img-container
{
    position: relative;
}

.overlay-text
{
    font-family: Arial;
    position: absolute;
    top: 10px;
    left: 10px;
    color: black;
    text-shadow: 0 0 5px white;
    font-size: 20px;
    display: none;
}

以下是fiddle。

图像上的图层文字？

1 个答案: