Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.
Позициониране на фон
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Как да покажеш точната иконка от спрайт чрез позициониране
Когато използваш спрайт за фон, по подразбиране се вижда горният ляв ъгъл на изображението. За да избереш конкретна иконка, трябва да комбинираш правилно позиция и размер на фона. Най-важното е, че оразмеряваш целия спрайт, а чрез отместване показваш само желаната част в контейнера.
Стъпка по стъпка: позициониране на иконка в „пин“
- Задай спрайта като фон на елемента (например „пин“).
- Премахни ограничението за размер, за да видиш как по подразбиране се показва горният ляв ъгъл.
- Добави
background-positionсъс стойности0 0(ляво горе). - Започни да местиш изображението с отрицателни стойности (например
-20px -5px), докато желаната иконка се покаже в рамките на елемента. - Добави
background-size, като имаш предвид, че оразмеряваш целия спрайт, не отделна иконка. - По желание използвай краткия запис на
background, където позицията и размерът се разделят със/.
Използвани CSS свойства
background-position– определя позицията на фоновото изображение (ключови думи или пиксели).background-size– задава размер на целия спрайт.background– кратък запис, който позволява комбиниране на позиция и размер чрез/.
Експериментирай с различни отрицателни стойности, за да показваш трета, пета или друга иконка от спрайта и да постигнеш прецизно центриране.
Дискусия към урока
Въпроси
Отговори
