如何在图像上覆盖 <p> 中的文本答案

【问题标题】：how to overlay text in a <p> on an image如何在图像上覆盖 <p> 中的文本
【发布时间】：2012-05-03 17:34:38
【问题描述】：

我有一个带有 <p> 标签内的文本的 div 和一个 PNG 图像。我希望图像位于 div 的左侧，文本重叠。我曾尝试使用 z-index，但收效甚微。

HTML 代码：

<div class="caption">
    <img src="images/stain.png" id="stain">
    <p>The BA New Media course which I am studying is run by the Institute of Comminications Studies (ICS) at The University of Leeds. The Institute of Communications Studies is an internationally renowned centre for teaching and research in communications, media and culture. Their research is multidisciplinary and has particular strengths in the areas of cultural industries, international communication and political communication. <a href="http://ics.leeds.ac.uk/about/" target="_blank"><strong class="more">Read More...</strong></a>
</div>

CSS 代码：

.caption {
    width:80%;
    display:block;
    margin:auto;
    margin-top:5%;
    z-index:5;
}

#stain {
    z-index:1;
}

【问题讨论】：

您希望图像左对齐，但文本跨越整个 div 并重叠在图像顶部？
是的，这就是我所追求的。左边的图像。文本然后与图像重叠。
like this?

标签： html css z-index overlap

【解决方案1】：

如果我理解您的要求，您可以将您的图像设为<div> backgorund 图像.. 在 css 中像这样：

.caption {
    background-image: url(images/stain.png);
    background-repeat:no-repeat;
    width:80%;
    display:block;
    margin:auto;
    margin-top:5%;
}

并从<div> 中删除<img> 标记

就像我评论中的例子。

[编辑]
或者，如果您需要更多控制，请使用position: relative css 等：

CSS：

    .caption {
        width:80%;
        display:block;
        margin:auto;
        margin-top:5%;
    }

    img.floaty {
      display:inline;
         float: left;
    }

    .blurb {
       position: relative;
        top:20px;
        left: -50px;
    }

html:

<div class="caption">
    <img class="floaty" src="images/stain.png" id="stain" />
    <p class="blurb">The BA New Media course which I am studying is run by the Institute of Comminications Studies (ICS) at The University of Leeds. The Institute of Communications Studies is an internationally renowned centre for teaching and research in communications, media and culture. Their research is multidisciplinary and has particular strengths in the areas of cultural industries, international communication and political communication. <a href="http://ics.leeds.ac.uk/about/" target="_blank"><strong class="more">Read More...</strong></a></p>
</div>

For example.

【讨论】：