Използване на CSS за задаване на фоново изображение

• Април 26, 2024

Някога се чудите как уебсайтовете управляват тези красиви дизайни и снимки, плаващи зад текста? Всичко е направено чрез магията на каскадните стилове. CSS не само ви позволява да определите изображение за фона на вашата страница, но също така ви позволява да настроите как се показва изображението, така че да можете да получите само вида, който искате.

Основният градивен елемент за вашето фоново изображение е, ако е достатъчно, свойството 'background-image'. Използвате това свойство, за да кажете на сайта си къде се намира файлът с изображения, както следва:

тяло {
background-image: url ("image.gif");
}

Това е всичко, което трябва да направите, за да поставите фоново изображение за вашата уеб страница. Разбира се, вероятно ще искате да персонализирате как изглежда изображението. Да речем, че искате вашето изображение да започва в горната част на страницата, но да е центрирано хоризонтално, вместо да е подравнено наляво (подравняването по подразбиране). В този случай ще искате да добавите свойството 'background-position' към вашето CSS правило:

тяло {
background-image: url ("image.gif");
фон-позиция: център отгоре;
}

При определяне на свойството 'background-position' първата стойност задава хоризонталното подравняване (вляво, в центъра или вдясно), а втората задава вертикалното подравняване на изображението (отгоре, в центъра или отдолу).

След това решавате, че искате да спрете изображението да се облицова (повтаря се) хоризонтално, въпреки че искате да го плочки вертикално. Време е да извадите свойството 'background-repeat':

тяло {
background-image: url ("image.gif");
фон-позиция: център отгоре;
фон-повторение: повторение-у;
}

Задаването на стойността на „повторение-у“ казва на браузъра да нанесе фоновото изображение по оста y, по вертикала, но не и по оста x (хоризонтално), което е точно това, което искахме. Ако искате да го поставите хоризонтално, но не вертикално, вместо това ще използвате стойността „повторение-х“; ако изобщо не сте искали изображението да се облича, дайте му стойността „без повторение“. Стойността по подразбиране е да поставите изображението както хоризонтално, така и вертикално, така че ако това е най-добрият избор за вашето изображение, изобщо не е необходимо да задавате свойството 'background-repeat'.

И накрая, можете да разгледате свойството 'background-attachment'. По подразбиране изображението ви ще се превърта, докато страницата се превърта, така че ако не повтаряте изображението вертикално и имате дълга страница, вашето изображение няма да се разшири до дъното на страницата. Можете да промените това, като зададете свойството „прикачване на заден план“ на „фиксирано“, което кара фоновото изображение да остане на същото място на монитора, независимо от това как страницата се превърта. Сега правилата на фоновото ви изображение ще изглеждат така:

тяло {
background-image: url ("image.gif");
фон-позиция: център отгоре;
фон-повторение: повторение-у;
прикачен фон: фиксиран;
}


Ако искате да запазите вашите CSS правила възможно най-малки, можете да комбинирате всичките си фонови стойности в един ред, като използвате свойството „background“, като това:

заден план {
url ("image.gif") повторение-y фиксиран център отгоре;
}

Когато използвате свойството 'background', трябва да изброите стойностите в определен ред:
[фон-цвят (ако се използва)] [фон-изображение] [фон-повторение] [фон-прикачване] [фон-позиция]. Можете да пропуснете всяка стойност, която не ви трябва, просто трябва да изброите всички стойности, които използвате в правилния ред или правилото няма да работи.

Инструкции Видео: How to use marquee tag in HTML(scrolling images and text in web page ) (Април 2024).