jquery - 在图像上叠加文字？

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