Добавить наложение на изображение с помощью CSS? - PullRequest
Новая
       47

Добавить наложение на изображение с помощью CSS?

3 голосов
/ 19 июня 2011

У меня есть изображение, на котором я хочу отобразить 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;
}

Моя проблема в том, что я хочуэто плавать на дне и заголовок висит над краем.Я знаю, это из-за моего поля слева.

Пожалуйста, помогите!Я не знаю, куда идти отсюда.Если вы хотите, чтобы он увидел его в действии, нажмите здесь .

Спасибо!

Ответы [ 2 ]

2 голосов
/ 19 июня 2011

Поцарапайте поля; добавьте bottom:15px; и установите width:auto; left:20px; right:10px

2 голосов
/ 19 июня 2011

Если вы хотите подпись внизу, вам нужно изменить CSS для поля и позиции следующим образом: 

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