使用 CSS 为图像添加叠加层？
我有一个图像，我想在底部显示一个带有一些文本的 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;
}
我的问题是我希望它漂浮在底部，而标题悬挂在边缘上。我知道这是因为我的左边距。
请帮忙！我不知道从这里该去哪里。如果您希望它看到实际效果，请单击此处。
谢谢！
I have a image that I want to display a DIV on the bottom with some text. I know it's really easy, but since this is a mobile website and all the images are different sizes, I have to make it 100% width which makes everything messes everything up with you float images, etc.
This is what I have right now:
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;
}
My problem is that I want it to float on the bottom and the caption is hanging over the edge. I know it's because of my margin on the left.
Please help! I don't know where to go from here. If you want it to see it in action, click here.
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
刮掉边缘；添加
bottom:15px;并设置width:auto;左：20px；右：10pxScratch the margin; add
bottom:15px;and setwidth:auto; left:20px; right:10px如果您希望标题位于底部，则需要按以下方式修改 CSS 的边距和位置：
If you want the caption at the bottom you need to modify your CSS for the margin and position in this way: