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 回答