如何使用CSS为图像添加叠加效果？

Question

我是一名有用的助手，可以为您翻译文本。

我有一张图片，想要在底部显示一个带有文本的DIV。我知道这很容易，但由于这是一个移动网站，所有的图片都是不同大小的，所以我必须使它的宽度为100%，这会导致浮动图片等问题。

这是我现在拥有的内容：

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

我的问题是我想让它浮动在底部，但标题悬挂在边缘。我知道这是因为我左侧的边距。请帮忙! 我不知道该怎么办。如果你想看到它的效果，请点击这里。谢谢！

- iosfreak

---

PHP代码无关紧要；请发布客户端浏览器看到的HTML。 - Jared Farrish

我知道。那就是被显示的HTML。这都是简单的回显。你的意思是想看一张测试图片吗？ - iosfreak

@Jared Farrish：我把变量改成了其他的。没有改变对齐或功能方面的任何内容，但我已经完成了。 - iosfreak

Answer 1

如果您想要将标题放在底部，您需要按照以下方式修改CSS中的边距和位置：

.individual_picture_caption_wrapper_three {
    margin: 0 0 7px 7px;
    bottom:0;
}

- andyb

---

是的，但是当我给盒子添加左/右边距时，什么也没有发生。如果我添加 left: 7px;，那么在 width: 100% 的情况下它会向右侧悬挂 7 像素。你有什么想法吗？ - iosfreak

为什么要给盒子添加左/右边距？没有左/右边距它已经完美了。此外，您也可以从该规则中删除float:left - 它在使用position:absolute时不需要。 - andyb

Answer 2

将页面边距删减；添加 bottom:15px; 并设置 width:auto; left:20px; right:10px

- Thomas Shields

---

很高兴能帮到你。抱歉回答比较简短，我有点懒惰。 :) - Thomas Shields