Каскадни таблици със стилове (CSS) ниво 3, известен също като CSS3, въвежда поддръжка на множество фонови изображения. Можете да изброите множество фонови изображения, разделяйки всяко със запетая, и да зададете начина им на показване, като използвате свойства на фона като „background-position“ и „background-repeat“. Докато всеки набор от стойности съвпада с реда на URL адресите на изображенията, тези свойства ще произведат желаните ефекти. Можете също да използвате "прикачен фон", за да направите фон, фиксиран на екрана, когато потребителите превъртат нагоре или надолу.
1
Отворете вашата уеб страница в Notepad или редактор на код, за да видите нейния код. Потърсете HTML елемента, където искате да приложите множеството фиксирани фонове и намерете неговото име ID:
Съдържание ...2
Превъртете нагоре до горната част на кода и намерете маркера, който "" препраща към вашия стилов лист:
Намерете името на таблицата със стилове, която искате да редактирате в атрибута "href" на тага "". Ако вашият код включва множество "" тагове, потърсете този, сочещ към вашия общ стил, а не файлове с имена като "print" или "IE.
3
Отворете таблицата със стилове в Notepad или вашия редактор на код. Потърсете името на идентификатора на вашия HTML елемент в кода. Добавете този селектор в долната част на кода си, ако не го намерите:
}
4
Задайте свойството "background-image" между фигурните скоби след вашия селектор:
фоново изображение: URL (път / към / първи-bg.png), URL (път / към / втори-bg.png);
}
Отделете всеки URL със запетая, за да изброите множество фонови изображения. Задайте пътя във всяка скоба до URL адреса на фоново изображение, което искате да използвате.
5
Започнете празен ред под "background-image" и добавете свойството "background-position":
позиция на фона: горе вляво, 100px 200px;
Задайте позицията на всеки фон в същия ред, както се появяват в списъка с URL-та на "background-image". В горния пример "first-bg.png" е настроен да се показва в горния ляв ъгъл на HTML елемента. След това „second-bg.png“ ще покаже 100 пиксела надолу отгоре и 200 пиксела от левия край на HTML елемента. Можете също да използвате процентни стойности като „80% 20%“.
6
Задайте "background-attachment" под свойството "background-position":
прикачен фон: фиксиран, превъртане;
Използвайте „фиксирано“, когато искате фоновото изображение да остане на екрана, дори докато потребителят превърта нагоре или надолу по уеб страницата. Настройката по подразбиране е "превъртане".
7
Добавете нов ред под "background-attachment" и добавете свойството "background-repeat". Задайте това свойство на "no-repeat" за всяко фоново изображение, което не искате да поставяте на плочки:
background-repeat: no-repeat, repeat-x;
Използвайте "repeat-x" или "repeat-y", за да повторите изображение през оста "Y" (вертикална) или "X" (хоризонтална) на HTML елемент.
