Свойството background е
разделено на няколко части. Те са:
·
background-repeat (втора
част на урока)
·
background-position (втора
част на урока)
·
background-attachment (втора
част на урока)
·
background (съкратено) (втора
част на урока)
В този урок ще разгледаме подробно
първите две свойства като към всяко ще приложа нагледен пример.
background-color
Това свойство определя цвета, който ще
бъде използван за фон на избрания елемент.
За фон (background)
на елемент се счита пространството, което се обхваща от ширината и височината
на избрания елемент (независимо дали тези размери са фиксирани чрез ширина (width)
и височина (height)
или се определят от съдържанието на елемента).
Фона също включва и пространството
обхванато от padding и border (повече
за тях в бъдещи уроци).
Ако елемента няма размери (фиксирани
или зависещи от съдържанието) то цвета
няма да бъде видим. Също така, ако даден елемент съдържа
други елементи, върху всички от които има проложен float (повече
за това CSS свойство в някой от бъдещите уроци), то фона също няма да бъде
видим, защото височината на този елемент е 0. Решение в този случай е
добавянето на clear в
края на тази група от елементи.
Ако искаш да промениш фона на цялата страница, то тогава трябва да приложиш background-color върху <body>.
background-color може да приеме 3 стойности:
·
color - Стойноста тук може да бъде всеки валиден CSS
цвят или ключова дума. Това може да бъдат:
·
HEX стойности - Специален шестнадесетичен rgb (red, green,
blue) цветови код (на английски hexadecimal color). Например #dd7319;
·
RGB стойности - Специален десетичен rgb цветови код.
Например rgb(255,0,0);
·
Ключови думи, които на английски значат определен цвят. Например
“red”, “green”, “blue” и други.
·
transparent - Това е стойността
по подразбиране. Ако не зададем никаква друга стойност
на background-color, то неговата стойност ще бъде transparent. Transparent означава,
че фона на конкретния елемент ще бъде прозрачен т.е. ако зад избрания елемент
има друг елемент, то фона на втория елемент ще бъде видим.
·
inherit - Когато приложим inherit върху определен елемент, това означава че
стойността на background-color ще бъде
същата като стойността приложена върху родителския елемент т.е. стойността ще
бъде унаследена. Това свойство се използва рядко.
Пример
Стъпка 1
Създай нов xHTML документ, който да
използва Strict Doctype и да съдържа едно h2 заглавие и кратък текстов
параграф. Също така нека удебелим 2-3 думи от този текстов параграф чрез
strong.
В това упражнение ще променим фона на
страница, h2 заглавието и на текста, който е удебелен.
В браузъра ще видим следния резултат:
Стъпка 2
В кода от предишната стъпка можеш да
забележиш, че използвам външен файл за съхранение на CSS кода. Тази техника я
разгледахме в урока “Прилагане на CSS чрез външен файл”.
Създай нов документ, който ще използваш
за CSS. Запази го при html файла под името “style.css”. Сега го отвори и въведи следния код:
Стъпка 3
Запази промените и отвори страницата в
браузър.
Резултата не е от най-красивите, но
определено ни дава добра представа за работата на background-color.
В този пример съм използвал трите
възможности за задаване на цвят.
·
Фона на body е шестнадесетичен rgb цветови код, който започва
с #,
последван от 6 символа представляващи цвета. Това могат да бъдат числата от 0
до 9 и буквите от “a”
до “f”.
·
Фона на h2 заглавието е английската дума “white”, която
отговаря на “бял”.
·
Фона на strong е зададен чрез десетичен RGB код, който започва
с rgb(,
последван от 3 стойности за всеки цвят разделени със запетайка. Цветовете се
представят чрез цифрови стойности в обхвата от 0 до 255. Накрая се затваря
скобата ).
·
Фона на p е transparent. Това е
стойността по подразбиране и няма нужда от повторното ѝ задаване. Когато даден
елемент има background-color:transparent;,
елемента който е зад него ще се вижда. В случая се вижда фона на страницата.
Подробно разгледахме как работи background-color.
Надявам се, че всичко до тук е разбираемо и ясно. Ако имаш въпроси, сподели ги
след урока.
background-image
Това свойство определя снимката,
която ще бъде използвана за фон на избрания елемент.
Правилата, които важат за прилагане на
фон чрез background-color, важат и тук. Прочети ги отново в предишната точка.
По подразбиране снимката използвана за
фон започва от горния ляв ъгъл на страницата и се повтаря хоризонтално (x) и
вертикално (y), докато стигне долния десен ъгъл на страницата. Не се безпокой,
всичко това може да бъде контролирано чрез CSS. В следващия урок ще опиша
подробно как става това.
Ако искаш да използваш снимка за фон на цялата страница, то тя най-често се прилага върху <body>.
background-image може да приеме 3 стойности:
·
uri - Като стойност тук задаваме пътя до снимката,
която ще използваме за фон. Имаме няколко възможности:
Когато файла се намира в същата папка, в
която е css документа, тогава като стойност на uri изписваме
единствено името на файла и неговото разширение.
Когато файла се намира в отделна папка,
тогава задаваме пътя до файла включително и имената на всички папки, през които
преминаваме. Например, ако файла се намира в папка images, то тогава стойността ще бъде “images/snimka.jpg”.
Ако файла се намира в директория, която
е едно ниво по-високо от директорията, в която се намира css документа. Тогава
стойността ще бъде “../snimka.jpg”, където “../” означава, че се изкачваме с една директория
по-високо. Ако файла се намира две директории по-високо, тогава се изкачваме
два пъти “../../ snimka.jpg” и т.н.
Когато файла се намира някъде в
интернет, тогава като стойност можем да зададем пълния адрес то този файл,
например “http://www.example.com/ snimka.jpg”.
В урока “Работа с изображения“ говорих
за поддържаните файлови формати в Интернет. Това важи и тук. Опитай се да
използваш снимки, които са в един от изброените формати.
background-image: последвано от “url(”, последвано от еденична (') или двойна (")
кавичка, последвано от пътя до снимката, последвано от еденична (') или двойна
(") кавичка и накрая затваряме скобата ). Двете кавички трябва
да бъдат еднакви т.е. ако използваш еденична в началото, трябва да използваш
еденична и в края.
·
none – Това е стойността
по подразбиране. Ако не зададем никаква друга стойности
на background-image, то неговата стойност ще бъде none.
От друга страна, изричното поставяне на
“none” ще
предотвратипоказването на background-image.
·
inherit – Тази стойност ще позволи на елемента да
наследи стойността на background-image от
родителския елемент. Този подход обикновено не се използва, защото фона на
елемента и неговия родител ще се застъпят.
Как работи
background-image?
Така изглежда визуално работата на background-image:
Нека предположим, че страницата ни е с
размери 1300px (височина) на 1000px (ширина), а снимката, която ще използваме
за фон, е с размери 450px (височина) на 350px (ширина). Виждаме, че размерите
на снимката са значително по-малки от тези на страницата, затова когато я
приложим като фон, тя ще се повтори многократно докато изпълни ширината и
височина на цялата страница (виж фиг. 1).
Във фиг. 2 можеш да видиш реда, по който
се прилага background-image. Снимката започва
от горния ляв ъгъл (1) на страницата и свършва в долния десен ъгъл (9).
Ако искаш снимката на твоята страница да
не се повтаря, имаш няколко варианта, един от които е да използваш снимка с
размери по-големи от тези на страницата. Така обаче част от снимката може да
остане невидима за посетителя.
Пример
Стъпка 1
Ще използваме същата страница, която
създадохме по-рано. Единствената промяна ще бъде в CSS кода.
Създай нов html и css документ, ако не
искаш да променяш предишните.
Избери снимка, която искаш да приложиш за фон.
Постави снимката в същата папката,
в която се намират html и css докумените.
Стъпка 2
Отвори css файла и въведи следния код:
Стъпка 3
Запази промените и отвори страницата с
браузър.
Резултата
не е от най-красивите, но ясно можеш да видиш как функционира background-image.
Ако увеличим размера на снимката дотолкова, че да стане
по-голяма от размера на страницата, тогава резултата ще бъде значително
по-качествен.
