html - 使用 CSS 向图像添加叠加层？

Question

我有一张图片，我想在底部显示一个带有一些文本的 DIV。我知道这真的很简单，但是由于这是一个移动网站并且所有图像的大小都不同，所以我必须将其设置为 100% 宽度，这会使 float 图像等一切都变得困惑。

这是我现在拥有的:

HTML

<div class='individual_picture_capption_wrapper'>
<div class='individual_picture_capption_wrapper_two'>
<div class='individual_picture_caption_wrapper_three'><div class='individual_picture_caption'>Some Caption Here</div></div>
<img src='http://myflashpics.com/get_image.php?short_string=8ibjr&size=big' class='individual_picture_big' />
</div>
</div>

CSS

.individual_picture_caption {
    padding: 12px 10px 12px 10px;
    font-size: 13px;
    text-align: center;
}
.individual_picture_capption_wrapper {
    position: relative;
    background-color: #ffffff;
}
.individual_picture_capption_wrapper_two {
    margin-left: 0px;
    background-color: #cccccc;
}
.individual_picture_caption_wrapper_three {
    float: left;
    position:absolute;
    width: 100%;
    left: 0;
    background-image: url('http://myflashpics.com/viewer/images/transparent_black_70.png');
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #ffffff;
    margin: 15px 30px 15px 15px;
} 

我的问题是我想让它浮在底部，而标题悬在边缘。我知道这是因为我的左边距。

求助!我不知道从这里去哪里。如果你想让它看到它的实际效果，click here .

谢谢!

Answer 1

划掉边距；添加 bottom:15px; 并设置 width:auto;左:20px；右:10px