html - 如何在图像上覆盖 <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> backgorund 图像 .. 在 css 中是这样的:

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

并删除 <img>来自 <div> 的标签

喜欢我评论中的例子。

[编辑]
或者，如果您需要更多控制，请使用 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 .