Ввод текста (с полупрозрачный фон) по сравнению с изображения

Том, что довольно часто можно увидеть сайты и блоги следующего поколения, написаны в так называемую пометку над изображениями, часто сопровождающиеся темной полупрозрачной фоне. Вот пример:

В этой статье мы делаем перезаписи нашего изображения с помощью CSS.

Первое, что нужно сделать, это создать HTML структуры вроде этого:

 <div class="boximg">



  



 <img border="0" src="tramonto.jpg"/>



  



 <div class="boxtesto">



    



 <span class="testo"> красивый закат! </ SPAN>



  



 </ P>







 </ P>

Как видите, я создал DIV контейнер (с классом ". Boximg"), внутри которой я позиция моего образа и новых дел (с классом ". Boxtesto"), которая в свою очередь, содержит промежуток, который отмечает текст, который вы хотите применить .

Посмотрим теперь, CSS, что материально, место работы:

 . Boximg {



  



 положение: родственника;



  



 ширина: 400px; / * То же ширина изображения * /



  



 высота: 300px; / * же высоте изображения * /







 }







 {Div.boxtesto



  



 позицию: абсолютная;



  



 Внизу: 0px;



  



 Слева направо: 0px;



  



 Ширина: 100%;



  



 фон: RGB (0, 0, 0);



  



 фон: RGBA (0, 0, 0, 0,6);







 }







 {Span.testo



  



 обивка: 10px;



  



 цвет: # FFFFFF;



  



 шрифта: жирный 24px/45px Helvetica, Sans-Serif;



  



 Письмо-интервал:-1px;







 }

Ящик для хранения (". Boximg") имеет тот же размер и относительное позиционирование, чтобы изображение, которое предназначено для размещения.
Ящик для хранения текста (". Boxtesto") находится в центре внимания нашей работы имеет абсолютное позиционирование, которое выводит его из нормального потока элементов и позиционируется в нижнем левом углу своего контейнера и, очевидно, имеет ширину в 100% занимать все доступное пространство по горизонтали. Интересно, а затем, два определения фоновом режиме, используя RGB и RGBA, которые служат для определения темный фон и полупрозрачным.
Службы. "Текст", наконец, имеет единственной целью, чтобы стилизовать текст и применить немного 'обивка.

• <<
• 1
• 2
• >>