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

Question

我有一个 div，<p>标签内有文本，还有一个 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;
}

Answer 1

如果我理解你的要求，你可以让你的图像成为<div>背景图像..在CSS中，如下所示：

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

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

就像我评论中的例子一样。

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

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>     

例如。