添加叠加图像到CSS图像？

我有一个图像，我想用一些文字在底部显示DIV。我知道这很容易，但由于这是一个手机网站，所有的图像都是不同的尺寸，所以我必须使它的宽度达到100％，这使得所有东西都随着你的浮动图像等等而变化。现在所拥有的：添加叠加图像到CSS图像？

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。

谢谢！

来源

2011-06-19 iosfreak

PHP代码无关紧要;发布客户端浏览器看到的HTML。 –

我知道。这是显示的HTML。这一切都在一个简单的回声。你的意思是你想看一张测试图片？ – iosfreak

@Jared Farrish：我改变了一些东西。没有改变任何对齐或功能，但我做到了。 – iosfreak

刮开保证金;添加bottom:15px;并设置width:auto; left:20px; right:10px

来源

2011-06-19 00:19:49

这样做。改变了尺寸，它的工作。 – iosfreak

很高兴帮助。对于简短的回答抱歉，我很懒惰。 :) –

如果你想在你需要修改你的CSS在这样的保证金和头寸底部标题：

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

来源

2011-06-19 00:15:02 andyb

是的，但是当我为框添加左/右边距时，没有任何反应。如果我添加'left：7px;'，它会在右边悬挂7个像素，宽度为100％。思考？ – iosfreak

为什么要在框中添加左/右边距？它完全适合没有左/右边距。你也可以从该规则中删除'float：left' - 它不需要'position：absolute'。 – andyb

添加叠加图像到CSS图像？

回答

相关问题