使用 CSS 向图像添加叠加层？答案

【问题标题】：Add overlay to image with CSS?使用 CSS 向图像添加叠加层？
【发布时间】：2011-06-19 00:03:26
【问题描述】：

我有一个图像，我想在底部显示一个带有一些文本的 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;
}

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

请帮忙！我不知道从这里去哪里。如果你想让它看到它的实际效果，click here。

谢谢！

【问题讨论】：

PHP 代码无关紧要；发布客户端浏览器看到的 HTML。
我知道。那就是显示的 HTML。这一切都在一个简单的回声中。你的意思是你想看一张测试图？
@Jared Farrish：我将变量更改为一些东西。没有改变任何对齐或功能，但我做到了。

标签： html css mobile mobile-website

【解决方案1】：

刮擦边距；添加bottom:15px;并设置width:auto; left:20px; right:10px

【讨论】：

很高兴它有帮助。很抱歉简短的回答，我很懒惰。 :)

【解决方案2】：

如果你想要底部的标题，你需要以这种方式修改你的 CSS 的边距和位置：

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

【讨论】：

是的，但是当我向框添加左/右边距时，没有任何反应。如果我添加left: 7px;，它会在右侧与width: 100% 相距7 个像素。想法？
为什么要在方框中添加左/右边距？它完全适合没有左/右页边距。您也可以从该规则中删除 float:left - position:absolute 不需要它。