Усвояване на CSS background (част 1)

Публикуван: 22 март 2012
Категория: CSS

CSS е известен с богатото си разнообразие от свойства, чрез които изключително лесно можем да подобрим стила на нашата уеб страница.

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

Дали ще бъде определен цвят или снимка, всичко това разбира се зависи от сайта и неговите посетители, но едно може да бъде казано за всички тях: “Правилният избор на фон обогатява изживяването в страницата и оставя у посетителя спомен, който трае дълго след като я напусне”.

В следващите два урока ще ти помогна да овладееш CSS свойството background и ще се постарая да разясня всичко, което трябва да знаеш за него.

Свали

Свойството background е разделено на няколко части. Те са:

background-color
background-image
background-repeat (втора част на урока)
background-position (втора част на урока)
background-attachment (втора част на урока)
background (съкратено) (втора част на урока)

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

background-color

Това свойство определя цвета, който ще бъде използван за фон на избрания елемент.

За фон (background) на елемент се счита пространството, което се обхваща от ширината и височината на избрания елемент (независимо дали тези размери са фиксирани чрез ширина (width) и височина (height) или се определят от съдържанието на елемента).

Фона също включва и пространството обхванато от padding и border (повече за тях в бъдещи уроци).

Ако елемента няма размери (фиксирани или зависещи от съдържанието) то цвета няма да бъде видим. Също така, ако даден елемент съдържа други елементи, върху всички от които има проложен float (повече за това CSS свойство в някой от бъдещите уроци), то фона също няма да бъде видим, защото височината на този елемент е 0. Решение в този случай е добавянето на clear в края на тази група от елементи.

Ако искаш да промениш фона на цялата страница, то тогава трябва да приложиш background-color върху <body>.

background-color може да приеме 3 стойности:

background-color: { color | transparent | inherit };

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 заглавието и на текста, който е удебелен.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
		<meta http-equiv="Content-Type" content="text/html; 
			charset=utf-8" />
		<title>YouDevelop.net - Усвояване на CSS background - 
        background-color</title>
		<link href="style.css" rel="stylesheet" 
        type="text/css" />
	</head>
	<body>
		<h2>Усвояване на background-color</h2>
		<p>Това свойство определя цвета, който ще бъде 
        използван за <strong>фон на избрания елемент</strong>.
        </p>
	</body>
</html>

В браузъра ще видим следния резултат:

Нормална уеб страница с цветове по подразбиране.

Стъпка 2

В кода от предишната стъпка можеш да забележиш, че използвам външен файл за съхранение на CSS кода. Тази техника я разгледахме в урока “Прилагане на CSS чрез външен файл”.

Създай нов документ, който ще използваш за CSS. Запази го при html файла под името “style.css”. Сега го отвори и въведи следния код:

body {
	background-color:#b1c6c8;
}
h2 {
	background-color:white;
}
strong {
	background-color:rgb(221,115,25);
	color:#fefefe;
}

Стъпка 3

Запази промените и отвори страницата в браузър.

Успешно променихме фона на страницата и елементите h2 и strong

Резултата не е от най-красивите, но определено ни дава добра представа за работата на 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 стойности:

background-image: { uri | none | inherit };

uri - Като стойност тук задаваме пътя до снимката, която ще използваме за фон. Имаме няколко възможности:
Когато файла се намира в същата папка, в която е css документа, тогава като стойност на uri изписваме единствено името на файла и неговото разширение.

Когато файла се намира в отделна папка, тогава задаваме пътя до файла включително и имената на всички папки, през които преминаваме. Например, ако файла се намира в папка images, то тогава стойността ще бъде “images/snimka.jpg”.

Ако файла се намира в директория, която е едно ниво по-високо от директорията, в която се намира css документа. Тогава стойността ще бъде “../snimka.jpg”, където “../” означава, че се изкачваме с една директория по-високо. Ако файла се намира две директории по-високо, тогава се изкачваме два пъти “../../ snimka.jpg” и т.н.

Когато файла се намира някъде в интернет, тогава като стойност можем да зададем пълния адрес то този файл, например “http://www.example.com/ snimka.jpg”.

В урока “Работа с изображения“ говорих за поддържаните файлови формати в Интернет. Това важи и тук. Опитай се да използваш снимки, които са в един от изброените формати.

Начина, по който използваме background-image е:

background-image: последвано от “url(”, последвано от еденична (') или двойна (") кавичка, последвано от пътя до снимката, последвано от еденична (') или двойна (") кавичка и накрая затваряме скобата ). Двете кавички трябва да бъдат еднакви т.е. ако използваш еденична в началото, трябва да използваш еденична и в края.
none – Това е стойността по подразбиране. Ако не зададем никаква друга стойности на background-image, то неговата стойност ще бъде none.
От друга страна, изричното поставяне на “none” ще предотврати показването на background-image.
inherit – Тази стойност ще позволи на елемента да наследи стойността на background-image от родителския елемент. Този подход обикновено не се използва, защото фона на елемента и неговия родител ще се застъпят.

Как работи background-image?

Така изглежда визуално работата на background-image:

Визуално представяне на работата на свойството background-image

Нека предположим, че страницата ни е с размери 1300px (височина) на 1000px (ширина), а снимката, която ще използваме за фон, е с размери 450px (височина) на 350px (ширина). Виждаме, че размерите на снимката са значително по-малки от тези на страницата, затова когато я приложим като фон, тя ще се повтори многократно докато изпълни ширината и височина на цялата страница (виж фиг. 1).

Във фиг. 2 можеш да видиш реда, по който се прилага background-image. Снимката започва от горния ляв ъгъл (1) на страницата и свършва в долния десен ъгъл (9).

Ако искаш снимката на твоята страница да не се повтаря, имаш няколко варианта, един от които е да използваш снимка с размери по-големи от тези на страницата. Така обаче част от снимката може да остане невидима за посетителя.

Пример

Стъпка 1

Ще използваме същата страница, която създадохме по-рано. Единствената промяна ще бъде в CSS кода.

Създай нов html и css документ, ако не искаш да променяш предишните.

Избери снимка, която искаш да приложиш за фон. Аз ще работя с ето тази:

Снимка, която ще използвам за фон на страницата

Постави снимката в същата папката, в която се намират html и css докумените.

Стъпка 2

Отвори css файла и въведи следния код:

body {
	background-image:url("snimka.jpg");
}
h2, p {
	background-color:white;
}

Стъпка 3

Запази промените и отвори страницата с браузър.

Резултат от прилагането на background-image

Резултата не е от най-красивите, но ясно можеш да видиш как функционира background-image.

Ако увеличим размера на снимката дотолкова, че да стане по-голяма от размера на страницата, тогава резултата ще бъде значително по-качествен.

Подобряване на резултата чрез прилагане на снимка с по-големи размери

Надява се, че урока ти хареса и разшири знанията ти по CSS. Ако имаш въпроси и коментари, не се колебай да ги споделиш след урока.

Във втора част от този урок ще разгледаме останалите background свойства. Всички те ни дават допълнетелен контрол върху работата на background-image.

Използвани снимки

Снимка към урока и упражненията: Janine

Свали

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

2 страхотни коментара

1

seta
02 ноември 2016 17:22
Здравейте. Както и да напиша, кода не ми показва изображението.
2

Джават Ушев (автор)
06 ноември 2016 22:59
Може би пътят до изображението е грешен. Ако то се намира в папка images, а css файл се намира в папка style, тогава пътят трябва да бъде background-image:url("../images/snimka.jpg");

Надявам се това да ти е помогнало.

Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други