Как можно наложить текст на изображение с фоном, как это
<div id="slider" class="nivoSlider">
<img src="images/slide1.jpg"/>
</div>
1
30 Авг 2014 в 20:09
2 ответа
Лучший ответ
Как это http://codepen.io/anon/pen/jaBho
<div>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, placeat!</h4>
<img src="http://rack.0.mshcdn.com/media/ZgkyMDE0LzA4LzI0LzVkL21pbGV5ZG9nLmEzMDVjLmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/1750ef37/ade/miley-dog.jpg">
</div>
Css
div{position: relative;
margin: 35px;
width: 500px;
height: 300px;
overflow: hidden;
}
h4{
background-color: rgba(174, 0, 0, 0.51);
position: absolute;
bottom: 30px;
left: 30px;
width: 300px;
padding: 20px;
display: block;
color: white;
font-size: 24px;
}
2
30 Авг 2014 в 20:19
Вы имеете в виду что-то вроде этой демонстрации?
Важные вещи:
Родительский div должен иметь position: relative и текстовый div position: absolute. Затем вы размещаете его на изображении с помощью top: ?; left: ?; bottom: ? и text-align: center.
Вот HTML :
<div id="slider">
<img src="http://www.primolo.de/archiv/BrAlIbKe/hp_bilder/luftballons2_v-gallery_1_.jpg"/>
<div id="slider-text">This is awesome</div>
</div>
И CSS :
#slider {
position: relative;
width: 400px;
}
#slider-text {
position: absolute;
width: 200px;
color: #FFF;
font-weight: bold;
bottom: 5%;
left: 30px;
padding: 30px 0;
text-align: center;
background-color: rgba(200, 50, 0, 0.8);
}
В большинстве вещей не было необходимости, но я думаю, что это выглядит неплохо.
Надеюсь это поможет.
1
30 Авг 2014 в 20:26
Большое спасибо за ваш ответ, но, поскольку первый ответ был опубликован первым, мне придется отметить этот ответ как правильный. Но не разочаровывайтесь, ваш ответ был таким же хорошим!
–
30 Авг 2014 в 20:33