0

タグ内にテキストを含む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;
}
4

1 に答える 1

4

私があなたの要件を理解しているなら、あなたはあなたの画像を<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>

たとえば。

于 2012-05-03T17:59:01.783 に答える