添加叠加图像到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。
谢谢!
答
刮开保证金;添加bottom:15px;
并设置width:auto; left:20px; right:10px
+0
这样做。改变了尺寸,它的工作。 – iosfreak
+0
很高兴帮助。对于简短的回答抱歉,我很懒惰。 :) –
PHP代码无关紧要;发布客户端浏览器看到的HTML。 –
我知道。这是显示的HTML。这一切都在一个简单的回声。你的意思是你想看一张测试图片? – iosfreak
@Jared Farrish:我改变了一些东西。没有改变任何对齐或功能,但我做到了。 – iosfreak