CSS е съкращение от Cascading Style Sheets. Това е прост, но мощен език за дизайн, който има способността да трансформира уеб страници. По-просто казано, той рационализира процеса на правене на уеб страниците на представителни и привлекателни за потребителите с помощта на . В тази статия ще разберем как да внедрите различни фонови изображения в CSS в следния ред:
- Фоново изображение в CSS Properties
- Фоново изображение в CSS
- Повторение на фона
- Прикачен фон
- Позиция на фона
- Фоново изображение в CSS размер
- Цвят на фона
Фоново изображение в CSS Properties
Има много свойства, които се използват за контрол на поведението и позиционирането на изображението. Тези свойства са:
- фоново изображение
- фон-повторение
- фон-прикачен файл
- фон-позиция
- размер на фона
- Цвят на фона
Ще се запознаем с всяко от тези свойства и ще видим кога и как да ги използваме с една интересна демонстрация.
изпълнение на сливане на сортиране c ++
Фоново изображение в CSS
The фоново изображение свойството, както подсказва името, просто се използва за обозначаване и задаване на фоновото изображение чрез елемент в уеб страница. Фоново изображение по подразбиране се поставя в горния ляв ъгъл на елемент.
синтаксис: фоново изображение: url | няма | линеен градиент | радиален градиент
body {background-image: url ('apple.jpg')}фон с помощта на url
Нека разберем параметрите:
- url: Входът към този параметър ни позволява да посочим или файлов път до всяко изображение, или URL към изображението, което трябва да бъде зададено като фон. За да декларирате повече от едно изображение, URL адресите са разделени със запетая.
body {background-image: url ('apple.jpg')} 
- нито един: Това е стойността по подразбиране на свойството и не се изобразява фоново изображение, ако е посочена неговата стойност.
body {фон: няма}- линеен градиент (): Фоновото изображение е зададено на линеен градиент. За това свойство се изискват минимум поне два цвята, т.е. отгоре надолу.
body {background-color: # 001 background-image: линеен градиент (бял 15%, прозрачен 16%), линеен градиент (бял 15%, прозрачен 16%) размер на фона: 60px 60px background-position: 0 0, 30px 30px}- радиален градиент (): Фоновото изображение е зададено на радиален градиент. За това свойство се изискват минимум поне два цвята, т.е. за център до ръбовете.
body {background-color: # 001 background-image: радиален градиент (бял 15%, прозрачен 16%), радиален градиент (бял 15%, прозрачен 16%) размер на фона: 60px 60px background-position: 0 0, 30px 30px}- повтарящ се линеен градиент (): Той повтаря линеен градиент. Нека използваме същия пример, който видяхме по-горе в линейния градиент за повтарящ се линеен градиент и да видим разликата.
тяло {background-color: # 001 background-image: повтарящ се линеен градиент (бял 15%, прозрачен 16%), повтарящ се линеен градиент (бял 15%, прозрачен 16%) размер на фона: 60px 60px фон-позиция : 0 0, 30px 30px}- повтарящ се-радиален градиент (): Повтаря радиален градиент. Нека изследваме същия пример, който използвахме по-горе в радиален градиент.
body {background-color: # 001 background-image: повтарящ се-радиален градиент (бял 15%, прозрачен 16%), повтарящ се-радиален градиент (бял 15%, прозрачен 16%) размер на фона: 60px 60px фон-позиция : 0 0, 30px 30px}Резервен фон
Винаги е препоръчително като професионален съвет да добавите цвят на фона като резервен вариант. Той идва на помощ, особено когато или фоновите изображения не се зареждат, или градиентният фон, който задаваме по време на разработването, не се поддържа от някои от старите браузъри, в които се гледа.
Това не разваля потребителското изживяване и може да бъде обявено по следния начин:
тяло {background: url (apple_lost.jpg) розово}Множествен фон
Също така имаме опция за задаване на множество фонови изображения и това се изисква в повечето случаи като изображение на преден план и фон. Тук е важен редът на изображението, първо се декларира изображението, което трябва да е отпред, а след това се декларира изображението, което трябва да е отзад.
По-долу е примерът за множество фонови изображения:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}Повторение на фона
Свойството background-repeat се използва заедно с background-image за дефиниране на поведението на повторение на изображение. Той определя дали и как ще се повтори фоново изображение. Фоновото изображение по подразбиране се повтаря както вертикално, така и хоризонтално.
Възможните стойности са:
- repeat - Изображението се повтаря както хоризонтално, така и вертикално
- no-repeat - Изображението не се повтаря
- repeat-x - Изображението се повтаря хоризонтално
- repeat-y - Изображението се повтаря вертикално
- space - Изображението се повтаря с равномерни интервали или пропуски между тях.
- кръг - Изображението се повтаря, за да запълни зоната, без пропуски между тях.
Синтаксисът на CSS за свойството background-repeat е:
фоново повторение: repeat | repeat-x | repeat-y | no-repeat | интервал | кръг
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Прикачен фон
The фон-прикачен файл свойството се използва заедно с фоновото изображение, за да се посочи дали изображението трябва да се превърта при превъртане на съдържанието. Това означава, че фоновото изображение трябва да бъде фиксирано или трябва да се превърта заедно с документа спрямо изгледа на прозореца на браузъра. Стойността по подразбиране е да превъртите.
Възможните стойности са:
- превъртане - Изображението се превърта заедно със страницата.
- фиксирано - изображението няма да се превърта заедно със страницата
Синтаксисът на CSS за прикачения фон е:
фон-прикачен файл: превъртане | фиксиран
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Позиция на фона
The фон-позиция свойството се използва за обозначаване на местоположението или позиционирането на фоново изображение. Възможните стойности са:
- връх
- нали
- отдолу
- наляво
- център
- комбинация от тези стойности (напр. вляво отгоре)
Синтаксисът на CSS за фоновата позиция е:
фон-позиция: горе | вдясно | вляво | отдолу | в центъра
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Фоново изображение в CSS размер
Това свойство е едно от най-полезните, тъй като ни позволява да контролираме размера на фоновото изображение. Има различни комбинации, които можем да използваме с това свойство и съответно да получим резултати. Стойността по подразбиране е автоматично.
Следните стойности могат да се използват с размер на фона:
- Автоматичен
- дължина - височина и ширина на изображението, напр. 20px 40px.
- процент - височина и ширина на изображението като процент w.r.t родителски елемент, напр. 50% 50%.
- center - Подравнете изображението към центъра
- корица, мащабиране на изображението, така че да покрие изцяло зоната на фона.
- съдържат, мащабирайки изображението, за да се побере до действителната му височина и ширина.
Синтаксисът на CSS за фоновата позиция е:
размер на фона: стойност
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, корица}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: sadrže, 400px 150px}Цвят на фона
Това се прилага най-простото от всички свойства в CSS. Той прилага плътни цветове към фона на страницата. Стойността за това свойство може да бъде посочена в цветове (например червено, синьо и т.н.), шестнадесетична стойност и RGB стойност.
Синтаксисът на CSS за цвета на фона е:
Цвят на фона: стойност
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Това завършва всички свойства, които можем да използваме с фона. Винаги можем да опитаме различни комбинации от свойствата, както видяхме в нашата демонстрация.
CSS е от съществено значение и трябва да придобие умения за всеки разработчик на уеб сайтове. Помага при проектирането и оформянето на фона и за изграждането на впечатляващи уебсайтове и обогатяване на потребителското изживяване. Най-доброто е да продължите да експериментирате и да се възползвате пълноценно от тази специална технология отпред, тъй като тя може да направи чудеса и динамично да трансформира страницата.
Вижте нашите което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ви кара да владеете умения за работа с back-end и front-end уеб технологии. Включва обучение по уеб разработка, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Имате въпрос към нас? Моля, споменете го в раздела за коментари в блога „Фоново изображение в CSS“ и ние ще се свържем с вас.