0

画像全体にバナーを表示したいと思います。画像とバナー (banner-snippet) の両方が同じ親要素にあるため、黒いバナーが表示されなくなります。どうすればこれを修正できますか。

ここで私のソースを見ることができます：

<div id="slide-banner">
    <img src="http://upload.wikimedia.org/wikipedia/commons/0/0c/GoldenGateBridge-001.jpg"/>
    <div id="slide-banner-snippet">
    </div>
</div>​

#slide-banner {
    margin-top: 70px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px 0px 0px 0px;
    height: 350px;
    width: 916px;
    border: 1px solid #ccc;
    border-radius: 3px 3px 3px 3px;
    overflow: hidden;
}

#slide-banner img {
    height: auto;
    width: 916px;
}

#slide-banner-snippet {
    height: 55px;
    width: 916px;
    background-color: #000;
}

http://jsfiddle.net/uSw8S/

4

3 に答える 3

0

あなたは#slide-banner比較的配置され、slide-banner-snippet絶対的に配置され、追加することができますbottom:0;

#slide-banner {
    margin-top: 70px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px 0px 0px 0px;
    height: 350px;
    width: 916px;
    border: 1px solid #ccc;
    border-radius: 3px 3px 3px 3px;
    overflow: hidden;
    position:relative;
}

#slide-banner img {
    height: auto;
    width: 916px;
}

#slide-banner-snippet {
    height: 55px;
    width: 916px;
    background-color: #000;
    position:absolute;
    bottom:0;
}

http://jsfiddle.net/uSw8S/2/

于 2012-07-23T02:28:01.630 に答える
0

フロートする要素を絶対に配置します。つまり、次のようになります。

position:absolute;
top:0;
z-index:1;
于 2012-07-23T02:17:59.280 に答える
0

あなたはちょうど置くことができます

<div id="slide-banner-snippet">
    </div>

前

<img src="http://upload.wikimedia.org/wikipedia/commons/0/0c/GoldenGateBridge-001.jpg"/>

例はこちら

于 2012-07-23T07:10:29.753 に答える