CSS фон. Пълно ръководство. Фон в CSS (цвят, позиция, изображение, повторение, прикачен файл) - всичко за настройка на фонов цвят или фоново изображение на Html елементи Фон на страница в css
От автора:здравейте всички Фоновите цветове и изображения играят огромна роля в уеб дизайна, тъй като ви позволяват да проектирате елементи по-привлекателно. Днес ще разгледаме как да направите фон в HTML.
Възможно ли е да се използва HTML за настройка на фона?
Веднага ще кажа, че не. По принцип html не е създаден за проектиране на уеб страници. Просто е много неудобно. Например има атрибут bgcolor, с който можете да зададете цвета на фона, но това е много неудобно.
Съответно ще използваме каскадни стилови таблици (CSS). Има много повече възможностиза задаване на фона. Днес ще разгледаме най-основните.
Как да задам фон с помощта на css?
Така че, на първо място, трябва да решите на кой елемент искате да зададете фон. Тоест, трябва да намерим селектор, на който да напишем правило. Например, ако трябва да зададете фон за цялата страница като цяло, можете да направите това чрез селектора за тяло, а за всички блокове чрез селектора div. Е и т.н. Фонът може и трябва да бъде обвързан с всякакви други селектори: стилови класове, идентификатори и т.н.
След като сте избрали селектора, трябва да напишете името на самия имот. За да зададете цвета на фона (а именно плътен цвят, а не градиент или изображение), използвайте свойството background-color. След него трябва да поставите двоеточие и да напишете самия цвят. Това може да стане по различни начини. Например, използване на ключови думи, шестнадесетичен код, rgb, rgba, hsl формати. Всеки метод ще свърши работа.
Най-често използваният метод е шестнадесетичен код. За да изберете цветове, можете да използвате програма, която показва цветовия код. Например photoshop, paint или някакъв онлайн инструмент. Съответно, като пример, ще напиша общ фон за цялата уеб страница.
тяло (цвят на фона: #D4E6B3; )
Този код трябва да бъде вмъкнат в главата. Важно е файловете да са в една папка.
Картина като фон
Ще използвам малка икона като изображение. html език:
Нека създадем празен блок с идентификатор:
< div id = "bg" > < / div > |
Нека му дадем ясни размери и фон:
#bg(ширина: 400px; височина: 250px; фоново изображение: url(html.png); )
#bg( ширина: 400px; височина: 250px; фон - изображение : url (html . png ) ; |
От този код можете да видите, че използвах ново свойство - background-image. Предназначен е специално за вмъкване на картина като фон на html елемент. Да видим какво се случи:
За да посочите картина, трябва да напишете след двоеточие ключова дума url и след това посочете пътя до файла в скоби. В този случай пътят се посочва въз основа на факта, че изображението е в същата папка като html документа. Трябва също да посочите формата на изображението.
Ако сте направили това и фонът все още не се показва в блока, проверете отново дали сте написали правилно името на изображението, дали пътят и разширението са зададени правилно. Това са най-честите причини, поради които фонът просто не се появява, защото браузърът не може да намери изображението.
Но забелязахте ли едно нещо? Браузърът взе и умножи изображението в целия блок. И така, само за да знаете, това е поведението по подразбиране на фоновите изображения - те се повтарят вертикално и хоризонтално, докато могат да се поберат в блока. Чрез това поведение можете лесно да контролирате. За да направите това, използвайте свойството background-repeat, което има 4 основни стойности:
Повторение – стойност по подразбиране, изображението се повтаря от двете страни;
Repeat-x – повтаря се само по оста x;
Repeat-y – повтаря се само по оста y;
No-repeat – изобщо не се повтаря;
Можете да напишете всяка стойност и да видите какво ще се случи. Ще го напиша така:
фоново повторение: повторение-x;
фон - повторение: повторение - x; |
Сега повторете само хоризонтално. Ако зададете забрана на повторение, ще има само една снимка.
Чудесно, можем да приключим тук, тъй като това са основните възможности за работа с фона, но ще ви покажа още 2 свойства, които ви позволяват да получите повече контрол.
Чрез повторение дизайнерите на оформление са можели да създават фонови текстури и градиенти, използвайки едно малко изображение. Може да е 30 на 10 пиксела или дори по-малък. Или може би малко повече. Изображението беше такова, че когато се повтаряше от едната или дори от двете страни, не се виждаха преходи, така че резултатът беше единичен безпроблемен фон. Между другото, този подход си струва да използвате сега, ако искате да използвате безпроблемна текстура на уебсайта си като фон. Днес градиентът вече може да бъде реализиран с помощта на css3 методи, определено ще говорим за това по-късно.
Позиция на фона
По подразбиране фоновото изображение, освен ако не е настроено да се повтаря, ще бъде в горния ляв ъгъл на неговия блок. Но позицията може лесно да се промени с помощта на свойството background-position.
Можете да го настроите по различни начини. Единият вариант е просто да посочите страните, в които трябва да се намира картината:
позиция на фона: отгоре вдясно;
позиция на фона: горе вдясно; |
Тоест вертикално всичко остава същото: фоновото изображение е разположено отгоре, но хоризонтално променихме страната надясно, тоест надясно. Друг начин за задаване на позиция е като процент. В този случай обратното броене започва във всеки случай от горния ляв ъгъл. 100% - целия блок. По този начин, за да поставим картината точно в центъра, я пишем така:
позиция на фона: 50% 50%;
позиция на фона: 50% 50%; |
Запомнете едно важно нещо за позиционирането - първият параметър винаги е хоризонталната позиция, а вторият е вертикалната позиция. Така че, ако видите стойност от 80% 20%, веднага можете да заключите, че фоновото изображение ще бъде изместено много надясно, но няма да падне много.
И накрая, можете да посочите позицията в пиксели. Всичко е същото, само вместо % ще има px. В някои случаи може да е необходимо такова позициониране.
Стенописна нотация
Съгласете се, че кодът се оказва доста тромав, ако всичко е настроено по начина, по който го направихме. Оказва се, че трябва да се уточни пътя до картината, повторението и позицията. Разбира се, повторението и позицията не винаги са необходими, но във всеки случай би било по-правилно да се използва стенографско обозначение за свойството. Изглежда така:
фон: #333 url(bg.jpg) без повторение 50% 50%;
фон: #333 url(bg.jpg) без повторение 50% 50%; |
Тоест, първата стъпка е да запишете цялостния плътен фонов цвят, ако е необходимо. След това пътят към изображението, повторение и позиция. Ако някой параметър не е необходим, просто го пропуснете. Съгласете се, това е много по-бързо и по-удобно, а също така значително намаляваме нашия код. По принцип ви съветвам винаги да пишете в съкратена форма, дори ако трябва да посочите само цвят или картинка.
Контролиране на размера на фоновото изображение
Сегашното ни изображение не е много добро за демонстриране на следващия трик, така че ще взема друг. Нека е с размер на блок или по-голям. И така, представете си, че сте изправени пред задачата да направите фоново изображение, така че да не запълва изцяло своя блок. И картината, например, е дори по-голяма от размера на блока.
Какво можете да направите в този случай? Разбира се, най-простият и разумен вариант би бил просто да намалите изображението, но не винаги е възможно да направите това. Да кажем, че лежи на сървъра и вътре в моментаняма време и възможност да го намалим. Проблемът може да бъде решен с помощта на свойството за размер на фона, което може да се нарече сравнително ново и което ви позволява да манипулирате размера на фоновото изображение или дори всеки фон.
Моето изображение сега заема цялото пространство в блока, но ще му дам размер на фона:
размер на фона: 80% 50%;
размер на фона: 80% 50%; |
Отново, първият параметър задава хоризонталния размер, вторият - вертикалния размер. Виждаме, че всичко е приложено правилно - снимката стана 80% от ширината на блока по ширина и половината по височина. Тук трябва само да направите едно уточнение - като зададете размера като процент, можете да повлияете на пропорциите на картината. Така че внимавайте, ако искате да не нарушите пропорциите.
Както можете да предположите, размерът на фона може да бъде определен и в пиксели. Има още две ключови думи, които също могат да се използват:
Cover – изображението ще бъде мащабирано така, че поне от едната страна да запълни изцяло блока.
Съдържа – мащабира го така, че изображението да се побере напълно в блока при максималния му размер.
Предимството на тези стойности е, че те не променят пропорциите на картината, оставяйки ги същите.
Трябва също да разберете, че разтягането на картината може да доведе до влошаване на нейното качество. Мога да дам пример от живота и реалната практика на дизайнерите на оформление. Всеки знае и разбира, че когато проектирате за настолни компютри, трябва да адаптирате сайта към основните ширини на монитора: 1280, 1366, 1920. Ако вземете фоново изображение с размер, да речем, 1280 на 200 и не го давайте размер на фона, след това екрани с по-голяма ширина Ще се появи празно пространство, изображението няма да запълни цялата ширина.
В 99% от случаите това не отговаря на уеб разработчика, така че той задава размер на фона: покритие, така че изображението винаги да се простира до максималната ширина на прозореца. Това е добра техника за използване, но сега ще се сблъскате с проблема, че потребителите с ширина на екрана от 1920 пиксела може да видят картина с неоптимално качество.
Нека ви напомня, че ще се разтегне до максималната си ширина. Съответно качеството автоматично ще се влоши. Единственото правилно решение тук би било първоначално да се използва по-голямо изображение – с ширина 1920 пиксела. Тогава на най-широките екрани той ще бъде в естествения си размер, а на други просто ще бъде постепенно отрязан, но в същото време, ако изберете правилно фоновото изображение, това няма да повлияе на външния вид на сайта.
Като цяло, това е само 1 пример за това как да използвате знанията, които сте придобили в тази статия, когато оформяте реални оформления.
Полупрозрачен фон с помощта на css
Друга функция, която може да се реализира с помощта на css, е semi прозрачен фон. Тоест през този фон ще може да се види какво стои зад него.
Като пример ще задам цялата страница като фон на изображението, което използвахме по-рано в примерите. За блока с идентификатор bg, върху който провеждаме всичките си експерименти, ще зададем фона с помощта на формата за настройка на цвета rgba.
Както казах по-рано, има много формати за задаване на цветове в CSS. Един от тях е rgb, доста добре познат формат за тези, които работят графични редактори. Записва се така: rgb(17, 255, 34);
Първата стойност в скоби е наситеността на червеното, след това зеленото, след това синьото. Стойността може да бъде цифрова от 0 до 255. Съответно форматът rgba не се различава, добавя се само още един параметър - алфа каналът. Стойността може да бъде от 0 до 1, където 0 е пълна прозрачност.
Здравейте, скъпи читатели на сайта на блога. Днес ще разгледаме пет CSS правила, които ви позволяват да зададете фон за всеки елемент в Html – фонова позиция (изображение, повторение, цвят, прикачен файл). Е, нека също не забравяме да споменем правилото за фоново съединение.
В това няма нищо сложно, но има някои тънкости и нюанси, които трябва да знаете и вече готов шаблон(запомнете за, което ще ви помогне да разкриете всички тънкости на всеки дизайн).
Нека ви напомня още веднъж, че тази статия е част от поредица и би било най-добре да започнете да изучавате стиловото маркиране от самото начало, а именно със статия за това какво е CSS и с какво се използва, след което да следвате в дадения ред в справочника. Въпреки че, във всеки случай, зависи от вас, но сега нека поговорим за настройката на фона.
Цвят, фонов цвят и фоново изображение
Нека първо да разгледаме как се задава цвета HTML елементичрез използване Css цветови правила. Всъщност тук всичко е просто. Синтаксисът е напълно нормален и можете да зададете цвета в съответствие с това как е направено в езика за маркиране на хипертекст. Както си спомняте, поставен след знака за хеш (хеш - “#fe35a3”) или с помощта на три цифри, ако първата съвпада със стойността на втората, третата с четвъртата и петата съответно с шестата ( цветен код “#aa33ff” може да се запише накратко като "a3f").
Също така цветове в Html и Css кодмогат да бъдат представени като думи (например „червено“), но най-често се използва шестнадесетичният код:
Цвят:#303
Като пример, оцветих този малък параграф със същия цвят като горния (#303). Вече е малко по-различен от цвета на всички останали параграфи (по-тъмен), който е зададен на #555 in CSS файлизползван от мен WordPress теми. Но настройката на цвета с помощта на цвят е доста проста, но с фона ще бъде малко по-сложно.
така че за фон в CssИма пет правила, които при желание могат да бъдат комбинирани в едно. За да ги видите, можете да отидете на текущата страница със спецификации на W3C и да потърсите нещо с думата Фон:
- цвят на фона - използвайки това правило, вие задавате цвета на фона за всеки Html елемент. Можете да използвате или код, или името на нюанса, т.е. всичко е точно същото, както беше при използване на цвят.
фоново изображение - с него можете да използвате картина като фон (но не забравяйте да прочетете за това, защото тежките снимки ще забавят зареждането на страниците), пътят до който ще бъде посочен във функционалността url ().
Ако погледнете спецификацията, ще видите това фонов цвят по подразбираневсеки елемент ще бъде прозрачен (стойността по подразбиране на правилото е “background-color:transparent”). Вярно е, че в елементите няма да е прозрачно по подразбиране, защото Това са системни елементи и всичко в тях е различно и различно от обикновените тагове на езика за маркиране на хипертекст.
Цветът в цвета на фона е зададен като стандартен (шест или три цифри от шестнадесетичен код или дума):
Цвят на фона: #FEFCDE
Например, фонът на този абзац е определен с помощта на фонов цвят с цветовия код, даден точно по-горе.
Всички останали четири CSS правила ще се отнасят само до фоновото изображение, което може да бъде зададено за всеки Html елемент и, ако желаете, точно позиционирано. Кой графичен файл ще се използва може да се посочи с помощта на фоново изображение.
Ако погледнете спецификацията на езика за маркиране, ще видите, че фоновото изображение по подразбиране е "няма" (т.е. не се използва изображение за фон). Е, ако все още имате нужда от това, тогава във функционалността url() ще трябва да посочите пътя до него:
Background-image:url(https://site/image/comment_top_focus.gif);
Например, за този параграф използвах графичен файл с фон, пътят до който е описан точно по-горе. Виждате, че цялата област, предназначена за този параграф, е покрита с повтарящо се изображение, което в оригинал изглежда така:
Тези. когато използвате само едно правило за фоново изображение, указващо пътя към графичния файл, същото изображение ще бъде умножено както вертикално, така и хоризонтално, докато покрие цялата област, разпределена на уеб страницата за този конкретен Html елемент (в нашия пример беше параграф). защо се случва това
Background-repeat - повторете фоновото изображение
Да, защото не сме посочили никаква стойност за CSS правилото фоново повторение, което означава, че за него ще се използва стойността по подразбиране. Разглеждайки спецификацията, откриваме, че тази стойност съответства на „повтаряне“ (повтаряне на изображението по всички оси). Отговорът дойде естествено.
Следователно с фоновото повторение можем управлявайте повторенията на фоновото изображение. Това правило може да има само четири значения:
Background-position - фоново позициониране
Сега възниква въпросът: възможно ли е да преместите фоновото изображение от горния ляв ъгъл на зоната, ограничаваща размера на елемента. Разбира се, че можете и за целта има отделно правило. позиция на фона:
Разглеждайки CSS спецификацията, става ясно защо фоновото изображение по подразбиране е притиснато точно до горния ляв ръб на областта на Html елемента. Тъй като стойността "0% 0%" е стойността по подразбиране за правилото за фонова позиция.
Е, когато това правило не е изрично зададено за елемент (както в нашия случай), тогава браузърът избира неговата стойност, която се приема в спецификацията по подразбиране (имайте предвид, че координатните оси в CSS се отчитат точно от горния ляв ръб на елемента площ).
Също така от спецификацията става ясно, че за да позиционирате фоновото изображение с помощта на background-position, можете да използвате както относителен (процент), така и абсолютни стойности(Например, ). Е, можете също да използвате думи, които ще съответстват на определени цифрови стойности. Но на първо място.
Когато настройвате позиционирането на фоновото изображение използвайки абсолютни единицивъв фоново положение се използва следният принцип за определяне на крайното му положение:
Тези. браузърът ще изчисли посочените отмествания по осите X и Y от началото на зоната, в която е позициониран обектът, до началото на самото изображение. Например, в този параграф позиционирах фоновото изображение чрез фонова позиция, използвайки следните CSS правила:
Background-image:url(https://site/image/logo.svg?1); фоново повторение:без повторение; фонова позиция:400px 25px;
Моля, обърнете внимание, че в този случай той ще бъде подравнен към центъра на зоната за гледане, а не към центъра на зоната, определена за тези параграфи. Ясно е, че в действителност такова поставяне на фоново изображение е малко вероятно да се използва.
Въпреки това, ако зададете фиксирана фонова позиция за елементи като Body или Html (т.е. в тагове, които покриват цялата уеб страница), тогава това изображение винаги ще бъде видимо в прозореца за изглед и това е точно използването на CSS background-attachment имот в модерно блоково разпределение.
Има още сглобяемо правило Предистория, което ви позволява да комбинирате всичките пет правила, описани по-горе, в една бутилка. Освен това стойностите за всичките пет в комбинираната версия могат да се използват в произволен ред и в произволно количество (те са уникални и браузърът няма да ги обърка един с друг). Всичко, което не посочите изрично, ще се счита за стойност по подразбиране от браузъра.
Png) без повторение 50%;
Примерното правило за сглобяема конструкция е приложено към този параграф за яснота. Не се получи красиво, но не това е най-важното. Този абзац използва странно жълто запълване на фона и също така използва изображение на логото на Liveinternet, подравнено към центъра на абзаца. защото Ако на правилото за фоново прикачване не е дадена никаква стойност, тогава се използва стойността за превъртане (по подразбиране).
Ако за някой елемент искате да зададете само цветно запълване и да не се занимавате с фоново изображение, тогава можете да направите това вместо това:
Цвят на фона: #FEFCDE
напиши:
Фон: #FEFCDE
Тъй като всички други стойности на правилото за prefab ще бъдат взети по подразбиране и това е, от което се нуждаете.
Успех на теб! Ще се видим скоро на страниците на сайта на блога
Може да се интересувате
Стил на списък (тип, изображение, позиция) - Css правила за персонализиране външен видсписъци в HTML код Как да конфигурирате редуващия се цвят на фона на редове от таблици, списъци и други Html елементи на сайта с помощта на псевдокласа nth-child 
Позиция (абсолютна, относителна и фиксирана) - начини за позициониране на Html елементи в CSS (правила отляво, отдясно, отгоре и отдолу) 
Float и clear в CSS - инструменти блоково оформление
Позициониране с помощта на Z-индекс и CSS Cursor правило за промяна на курсора на мишката 
Padding, Margin и Border - задайте вътрешна и външна подложка в CSS, както и граници за всички страни (отгоре, отдолу, отляво, отдясно) 
Display (block, none, inline) в CSS - задайте типа HTML дисплейелементи на уеб страница 
Приоритети в Css и тяхното увеличаване поради Важно, комбинация и групиране на селектори, потребителски и авторски стилове 
CSS - какво е това, как се свързват каскадните стилови таблици HTML кодс помощта на стил и връзка 
Таг, клас, Id и универсални селектори, както и селектори на атрибути в съвременния CSS
Мисля, че няма нито един обект, където имотът да не се използва CSS фон. Изглежда, че какво може да бъде по-просто от това свойство? Но не, неговите възможности са много по-широки от обичайното задаване на картина или цвят като фон на страницата. Някои неща ще бъдат познати, докато други вероятно ще бъдат нови за мнозина. Във всеки случай ще бъде полезно да знаете подробно как работи фонът.
CSS3 донесе много нови неща в свойството, като прозрачност и присвояване на няколко изображения като фон, но ще говорим за това по-долу, но първо ще разгледаме основите на свойството фон.
цвят на фона
Повече от сигурен съм, че вече сте задавали цвета на фона повече от веднъж. Това може да стане с помощта на няколко вида нотация: обикновена (използва се името на цвета), шестнадесетична или RGB нотация. Всеки тип е еквивалентен, използвайте който ви харесва най-добре. Опитвам се да използвам най-краткия вариант и за по-лесно възприемане полученият стилов файл е малко по-малък по размер.
P (цвят-фон: червен;) p (цвят-фон: #f00;) p (цвят-фон: #ff0000;) p (цвят-фон: rgb(255, 0, 0;))
CSS3 поддържа прозрачност, така че можем да го добавим към нашия цвят, например така:
P (цвят на фона: rgba(255, 0, 0, 0,5);)
Последната цифра задава прозрачността на 50%. Можете да зададете стойността на прозрачност от 0 (напълно прозрачен фон) до 1 (напълно непрозрачен).
фоново изображение
Това свойство също се използва много често; то ви позволява да присвоите изображение на фона. CSS3 добави възможност за присвояване на множество изображения към фона, като всяко създава свой собствен слой, така че всяко следващо да припокрива предишното. Защо това може да е полезно? Всичко е съвсем просто - да речем, че трябва да завиете малки украшения във всеки ъгъл на сайта. Като се има предвид повече или по-малко гумено оформление, използването на едно изображение не е опция. Затова правим 4 „слоя“, преместваме всяко изображение в неговия собствен ъгъл и това е, проблемът е решен
Основен текст (фоново изображение: url("image1"), url("image2"), url("image3"))
Ако трябва да присвоите едно изображение на фона, оставяме само първото в кода, мисля, че това е разбираемо.
Когато използвате всякакви изображения като фон, трябва да запомните две правила:
- задайте контрастен цвят на фона, в случай че потребителят не вижда изображението по някаква причина. Той може просто да изключи показването на снимки, спестявайки трафик.
- не използвайте фоново изображение, за да предадете нещо важна информация. Поради посочените по-горе причини, потребителят може да не го види.
Поддръжката за множество фонови изображения е доста широка. Всички браузъри, дори IE8, поддържат това свойство.
Кратка информация
CSS версии
Ценности
url Стойността е пътят до графичния файл, който е посочен в конструкцията url(). Пътят до файла може да бъде написан или в кавички (двойни или единични) или без тях.none Деактивира фоновото изображение за елемента.
HTML5 CSS2.1 IE Cr Op Sa Fx
фоново изображение
Обектен модел
document.getElementById("elementID ").style.backgroundImageБраузъри
Internet Explorer
до версия 7.0 включително, прилага фона към вътрешната страна на границата на елемент, който има зададено свойство hasLayout. Ако елементът няма hasLayout, свойството background-image ще зачита границите на елемента, както е посочено в спецификацията. Разликата в дисплея ще бъде забележима, ако границите са прекъснати или пунктирани, а не плътни.
Ако елементът е настроен на превъртане или автоматично, Internet Explorer 8 ще има вертикално забавяне от един пиксел, когато фонът се превърта.
none Деактивира фоновото изображение за елемента.
| 1 | 2 | 3 |
Резултат този пример V Браузър Chromeпоказано на фиг. 1. Интернет браузър Explorer, Opera и Firefox правилно показват фона на линията (фиг. 2).
ориз. 1. Повторете фона за всяка клетка
ориз. 2. Фон за цялата линия