3

画像とその説明を画像の下部 (および不透明度 0.8 の画像の上) に配置しようとしています。どちらの要素も div 要素内にあります。ただし、タイトルの表示を有効にします。

.title {
    opacity:0.8;
    background-color:black;
    color:white;
    height:40px;
    width:100%;
    position:relative;
    bottom:0px;
    z-index:2;
    clear:both;
}

.tilebg {
    position:relative;
    top:0px;
    height:100%;
    z-index:0;
    opacity:1;
}

私は例でフィドルを作りました

4

2 に答える 2

2

ポジショニングの仕組みは次のとおりです。

position:relative- これにより、現在の要素が原点 (0,0) として設定されます

position:absolute- 原点に対する要素の位置を設定します。親が を持っている場合position:relative、それが原点になります。それ以外の場合は、HTML ツリーが見つかるまで上に移動し、何も定義されていない場合はデフォルトで BODY になります。

つまり、親 = 相対、子 = 絶対

.item {
    opacity:1;
    background-color:grey;
    margin:20px;
    margin-left:20px;
    width:200px;
    height:200px;
    position:relative;
    background-image:url(http://i.imgur.com/vdDQgb.jpg);
}

.title {
    opacity:0.8;
    background-color:black;
    color:white;
    height:40px;
    width:100%;
    position:absolute;
    bottom:0px;
    z-index:2;
    clear:both;
    font-size:12px;
}
于 2012-11-15T15:11:21.333 に答える
1

figure新しい 要素とfigcaption要素はまさにこの目的のために作成されているため、これらを使用することをお勧めします。

<figure>
    <img src="http://placekitten.com/300/200" />
    <figcaption>This is the caption.</figcaption>
</figure>

次の CSS を使用:

figure {
    width: 300px; height: 200px;
    position: relative;  /* Permits placement figcaption absolutely */
}

figcaption {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: rgba(0,0,0,.8); /* Semi-transparent background */
}

デモ: http://jsfiddle.net/qu4a3/1/

于 2012-11-15T15:20:39.030 に答える