Пин с икона

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Поставяне на икона вътре в пин чрез background изображение

Най-важното в този урок е, че можем да комбинираме фон и изображение в един елемент, като поставим икона директно в пина чрез CSS. Вместо да държим картинката в h1, я преместваме в самия пин и я управляваме през стиловете. Така получаваме по-чист HTML и по-гъвкав контрол върху позиционирането.

Стъпка по стъпка: добавяне на икона към пина

Премахнете изображението от h1 елемента в HTML.
Добавете изображението като фон към елемента на пина чрез CSS.
Копирайте редовете за фоново изображение и ги поставете в стила на пина.
Заменете червения фон със синия цвят, използван за пинчето.
Коригирайте позицията на иконата, така че да стои добре в центъра на пина.

Използвани CSS свойства

background-image – задава изображение като фон на елемента
background-color – определя цвета на фона (в случая син вместо червен)
background-position – намества иконата вътре в пина
background-repeat – контролира дали изображението да се повтаря

Задача

Опитайте да смените иконата с различно изображение и експериментирайте с позицията ѝ. Целта е да постигнете балансиран и добре центриран визуален резултат вътре в пина.