0

画像タグを使用して、写真を含むdivの上に背景画像を含むdivをオーバーレイしようとしています。背景画像のあるdivが必要なのは、bg画像の上のそのdivに＃が表示され、両方が写真の上に表示されるためです。

簡単に言うと、あるdivを別のdivの上に配置しようとしています。申し訳ありませんが、まだ画像を絶対パスすることはできませんが、コンセプトは関係なく機能すると思います。

私が持っているコードは次のとおりです。

<div id="contestLeaders">
    <div class="leader"><img src="css/images/chili-photo.jpg" width="138" height="138" /></div>
    <div class="leader"><img src="css/images/chili-photo2.jpg" width="138" height="138" /></div>
    <div class="leader"><img src="css/images/chili-photo3.jpg" width="138" height="138" /></div>
    <div class="leader"><img src="css/images/chili-photo4.jpg" width="138" height="138" /></div>
    <div class="leader"><img src="css/images/chili-photo5.jpg" width="138" height="138" /></div>
</div>
<div class="leaderRating">5.0</div>

CSS：

#contestLeaders {overflow:hidden;}
#contestLeaders .leader {float:left; margin-right:4px;}
.leaderRating {background:url(images/leader-rating-bg.png) no-repeat; width:138px; height:37px; color:#fff;font-size:18px;padding:10px 0px 0px 35px;}
4

2 に答える 2

4

みんな助けてくれてありがとう。これは私がそれを機能させることができた方法です：

CSS

#contestLeaders
{
    overflow:hidden;
    margin-bottom:30px;
    position: relative;
}
.leader
{
    float:left;
    margin-right:4px;
}
.leaderRating
{
    background:url(images/leader-rating-bg.png) no-repeat;
    width:138px;
    height:37px;
    color:#fff;
    font-size:18px;
    padding:10px 0px 0px 35px;
    position: absolute;
    top:90px;
}

HTML

<div id="contestLeaders">
    <div class="leader"><div class="leaderRating">5.0</div><img src="css/images/chili-photo.jpg" width="138" height="138" /></div>
    <div class="leader"><div class="leaderRating">4.7</div><img src="css/images/chili-photo2.jpg" width="138" height="138" /></div>
    <div class="leader"><div class="leaderRating">4.2</div><img src="css/images/chili-photo3.jpg" width="138" height="138" /></div>
    <div class="leader"><div class="leaderRating">3.5</div><img src="css/images/chili-photo4.jpg" width="138" height="138" /></div>
    <div class="leader"><div class="leaderRating">2.8</div><img src="css/images/chili-photo5.jpg" width="138" height="138" /></div>
</div>
于 2012-08-02T15:32:16.107 に答える
1

画像付きの他のDIVの上に.leaderRatingDIVが必要だと思います。これを実現するには、次の変更を試してください。

  • オーバーレイするDIV（.leaderRating）をメインコンテナー（#contestLeaders）内に配置します
  • 次のCSSスタイルを追加します。{位置：相対; コンテナの場合は}、{position：absolute; 上：0; オーバーレイの場合

このようにして、コンテナに対してオーバーレイを絶対配置します。最後に、次のコードを考え出す必要があります。

HTML：

<div id="contestLeaders">
                    <div class="leader"><img src="css/images/chili-photo.jpg" width="138" height="138" /></div>
                    <div class="leader"><img src="css/images/chili-photo2.jpg" width="138" height="138" /></div>
                    <div class="leader"><img src="css/images/chili-photo3.jpg" width="138" height="138" /></div>
                    <div class="leader"><img src="css/images/chili-photo4.jpg" width="138" height="138" /></div>
                    <div class="leader"><img src="css/images/chili-photo5.jpg" width="138" height="138" /></div>

                    <div class="leaderRating">5.0</div>

                </div>

CSS：

    #contestLeaders {オーバーフロー：非表示; 位置：相対; }
    #contestLeaders .leader {float：left; margin-right：4px;}
    .leaderRating {background：url（images / Leader-rating-bg.png）no-repeat; 幅：138px; 高さ：37px; color：#fff; font-size：18px; padding：10px 0px 0px 35px; 位置：絶対; 上：0; }
于 2012-08-02T15:06:07.767 に答える