Мне было интересно как с помощью хтмл и css сделать текст поверх картинки. Писать на картинке мне не хотелось, поэтому на просторах интернета я нашёл данный способ, который и хочу вам сейчас представить.
И так схематическое представление:
HTML код
<div class=”image”>
<img src=”images/3754004820_91a5c238a0.jpg” alt=”" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
Ну и CSS
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
}
Вот и вся хитрость, как видите ничего сложного в данном примере нет. Желаю всем удачи.
услуги по составлению бизнес плана
Хочу купить земельный участок в подмосковье. Теперь знаю где можно выбрать.