Question

我正在尝试将图像及其描述放在图像的底部（以及不透明度为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;
}

我做了一个fiddle示例

Answer 1

以下是定位的工作原理：

position:relative - 这会将当前元素设置为原点（0,0）

position:absolute - 设置元素相对于其原点的位置。如果父母有position:relative，那么它就会成为原点。否则，它会向上移动HTML树，直到找到一个，如果没有定义，则默认为BODY。

所以：parent = relative，child = absolute

.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;
}

Answer 2

我建议您使用新的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/

DIV中的图像和描述

2 个答案: