Обвиваме изображението с HTML и CSS текст

Бърза навигация в страницата:

• Общо решение на проблема
• Групово приложение за всички изображения
• Налагаме текста върху изображението

Правилното и красиво разположение на всички обекти на страницата е неразделен елемент от дизайна на всеки уважаващ себе си сайт. Както винаги, CSS е незаменим тук. Факт е, че обвиването на изображението с HTML текст се извършва самостоятелно (с помощта на атрибутите align=left, align=right на img тага), но не създава отстъпи. Следователно не можете без CSS.

Общо решение на проблема

CSS? Знам няколко начина за решаване на проблема.

Така, например, картина може да бъде поставена в таг DIV, към който свойството float:left или float:right може да бъде зададено с помощта на CSS, с необходимите отстъпи.

Но не бих нарекъл този метод най-правилният - защо да включвате допълнителен таг в документа, ако проблемът може да бъде разрешен изключително в рамките на IMG тага?

Това става чрез присвояване на едни и същи свойства — float, което отговаря за подравняването, и margin, което отговаря за отстъпите.

Първо, нека присвоим клас на нашето изображение:

Сега нека напишем съответните CSS свойства - да кажем, че нашето изображение ще бъде отляво:

.img_class { float: ляво; поле: 10px 10px 10px 0; }

Свойството margin е необходимо, за да зададете отстъпа на текста от картината - в противен случай той ще се сгуши близо до нея, което няма да е много красиво. В същото време ги поставяме отгоре, отдясно и отдолу и задаваме лявото поле равно на нула, тъй като самото изображение ще бъде отляво.

Групово приложение за всички изображения

Ако искате всички изображения в документа да са подравнени вляво, това е въпросътмогат да бъдат решени веднага на ниво блок (елемент) на страницата, в която се намират - за да не се предписва всеки път класа за изображението. Дори малко спестяване на трафик си струва.

Да приемем, че снимките са в публикацията, която се показва на страницата на вашия сайт в .

В този случай ще бъде достатъчно да напишете следния код в CSS файла на вашия сайт:

.content img { float: ляво; поле: 10px 10px 10px 0; }

Сега всички изображения в блока "съдържание" ще бъдат подравнени вляво и ще имат горните отстъпи. Ако искате да направите изключение за някое отделно изображение - например да го поставите отдясно, тогава ще трябва да зададете id за него (например id=»my_img») и да напишете следните параметри в css файла (трябва да започва с решетка - #):

#my_img { float: надясно; поле: 10px 0 10px 10px; }

Налагаме текста върху изображението

Понякога е необходимо текстът да бъде написан директно върху изображението, например често е хубаво да направите голяма снимка за статията и да напишете заглавието на статията или някакъв вид анотация върху нея.

Отново, има много начини да направите това. Ще дам двата най-популярни.

Първо, можете да създадете блок, в който ще бъде написан текстът, а изображението ще действа като фон за този блок:

Текстът, който ще бъде насложен върху изображението

.my_block { фон: url (my_img.jpg) горе вляво без повторение; ширина: 500px; височина: 300px; подложка: 400px 0 0 0; }

В този блок редът с текст ще бъде поставен в долната част на блока — с горно поле от 400 пиксела.

Този метод е особено подходящ за дизайнерски елементи (шапка, лого на сайта), в които размерът на изображението и текста, които ще бъдатнаписана.

Друг метод е да създадете два блока (един с картина, един с текст) и да поставите единия "върху" другия според зададените параметри. Големият плюс на този метод е, че можете да зададете фон (включително полупрозрачност) в текстовия блок:

Текст за наслагване върху изображение

.img { width:500px; височина: 300px; позиция: относителна; .текст { цвят на фона: #FFF; ширина: 500px; височина: 50px; позиция: абсолютна; ляво: 0px; отгоре: 450px; }

В дадения пример поставихме един блок в друг, използвайки свойството position — блокът с текста ще има бял фон и ще бъде разположен в долната част на изображението.

Както можете да видите, няма нищо трудно в опаковането на клипове и наслагването на текст върху тях, основното е да експериментирате и да изберете най-успешния вариант!