Текст върху изображение с чист CSS
.jpg)
понеделник
Добър ден на всички мои приятели, постоянни читатели и гости. С помощта на елементите position: relative и position: absolute лесно можете да наложите текст върху изображение в публикацията си. Няма нужда да прибягвате до използването на онлайн редактори или други програми на трети страни.
Всичко се прави с помощта на чист CSS. Погледнете по-долу, за да разберете как ще изглеждат изображението и текстът върху него.
➤Със син цвят е отбелязано мястото на адреса на изображението и текста върху него, а всичко останало е въпрос на техника;
➤left: 150px; и left: 340 px; e разположението на основния текст по отношение на левия край и името на автора;
➤С използване на position: absolute; сме задали разположението на текста top: 30px; и името на автора top: 290 px; Прочетете за това тук, защото при използване на кода е вероятно да промените тези стойности на по-големи или по-малки;
➤Също така ширината и височината на целия блок е по ваш избор;
➤Промяна на цвета на самия шрифт и неговата големина вече може да се направи директно в редактора на публикацията, както при работа с друг текст;
За редактиране на код използвайте този инструмент.
Така можете да наложите текст върху изображение. За отбелязване е, че кодът за това е много по-лек в сравнение с този на изображението.
Доскоро!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:
Всичко се прави с помощта на чист CSS. Погледнете по-долу, за да разберете как ще изглеждат изображението и текстът върху него.
„…Какво му трябва на човека?
Едно приятелство добро,
една шишарка на пътека,
един бял лист, едно перо,
една случайна песен птича,
един нелош човешки път…
Бруррум! – как весело се свлича
по ламарината снегът!”
Едно приятелство добро,
една шишарка на пътека,
един бял лист, едно перо,
една случайна песен птича,
един нелош човешки път…
Бруррум! – как весело се свлича
по ламарината снегът!”
Валери Петров
Код:
<div style="position: relative;">
<img border="0" height="315" src=" Адрес на изображението (URL) " width="460" alt="Цветя"/>
<div style="font-family: Courier; font-size: 80%; left: 170px; position: absolute; top: 30px; width: 150px; text-indent: 0px;">Целият текст върху изображението</div>
<div style="font-family: Courier; font-size: 80%; left: 340px; position: absolute; top: 290px; width: 150px;">автор</div>
</div>
<img border="0" height="315" src=" Адрес на изображението (URL) " width="460" alt="Цветя"/>
<div style="font-family: Courier; font-size: 80%; left: 170px; position: absolute; top: 30px; width: 150px; text-indent: 0px;">Целият текст върху изображението</div>
<div style="font-family: Courier; font-size: 80%; left: 340px; position: absolute; top: 290px; width: 150px;">автор</div>
</div>
Пояснения
➤Със син цвят е отбелязано мястото на адреса на изображението и текста върху него, а всичко останало е въпрос на техника;
➤left: 150px; и left: 340 px; e разположението на основния текст по отношение на левия край и името на автора;
➤С използване на position: absolute; сме задали разположението на текста top: 30px; и името на автора top: 290 px; Прочетете за това тук, защото при използване на кода е вероятно да промените тези стойности на по-големи или по-малки;
➤Също така ширината и височината на целия блок е по ваш избор;
➤Промяна на цвета на самия шрифт и неговата големина вече може да се направи директно в редактора на публикацията, както при работа с друг текст;
За редактиране на код използвайте този инструмент.
Така можете да наложите текст върху изображение. За отбелязване е, че кодът за това е много по-лек в сравнение с този на изображението.
Доскоро!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:
