Как да направите фон в HTML и CSS
Мога ли да направя HTML средства за фон?
Аз трябва да кажа, че не. Като цяло, HTML не е създаден, за да се изготви една уеб страница. Това е просто много неприятно. Например, има BGCOLOR атрибут, с който можете да настроите цвета на фона, но това е много неудобно.
Съответно, ние ще използваме Cascading Style Sheets (CSS). Има много повече възможности за определени среди. Днес ние анализираме най-основните.
Как да настроите фона чрез CSS?
Така че на първо място трябва да се определи реда кой елемент, който искате да зададете фон. Тоест, ние трябва да намерим селектора, за които пишем правилото. Например, ако трябва да зададете на заден план в цялата страница като цяло, можете да го направите през тялото на селектор, всички блокове - чрез DIV за избор. Е, и т.н. Предистория могат и трябва да бъдат обвързани с каквито и да било други селектори: стилистични класове, документи за самоличност и т.н.
След като сте решили на селектор, трябва да напишете името на самия имот. За да зададете цвета на фона (това е плътен цвят, без да се наклони и изображения) с помощта на фон-цвят собственост. След това е необходимо да се постави на дебелото черво и пишат на самия цвят. Това може да стане по различни начини. Например, използването на ключови думи, шестнадесетичен код формат RGB, RGBA, HSL. Всеки метод, ще свърши работа.
Най-често използваният метод за шестнадесетичен код. За избор на цветове, можете да използвате програмата, в която кодът на цвета се вижда. Например, Photoshop, боя или който и да е онлайн инструмент. Съответно, например, да предпише обща информация за всички уеб страници.
Този код трябва да бъде поставена в главата на секция. Важно е, че файловете са в една папка.
Е, както ние се движат по. За да ви покажем и други възможности, определени на заден план, трябва да се създаде една малка единица, в която ние ще експериментира с фоновото изображение. Да, това е образ.
Wallpaper като фон
Като образ Ще използвам малка икона на HTML език:
Създаване на празен блок с идентификатор:
Питайте го за изчистване на размера и фона:
От този код, можете да видите, че аз използвах нова функция - фон изображение. Тя е предназначена само за да вмъкнете картинка като фон на HTML елемент. Нека да видим какво се е случило:
За да зададете снимката, която трябва да се напише на дебелото черво след адреса дума Не, и след това в скоби посочете пътя до файла. В този случай, по пътя се основава на факта, че изображението е в същата папка като HTML-документ. Можете също така трябва да се уточни формата на изображението.
Ако сте направили това, и в устройството все още не се появява на фона проверка отново дали сте написали името на картината, независимо дали определен път и разширение правилно правилно. Това са най-честите причини, които просто не се появяват на фона, защото браузърът не може да намери по-голям.
Но замисляли ли сте забелязали една функция? Браузърът снимах и се умножава по целия блок. Така че да знаете, това е поведението на фонови изображения по подразбиране - те се повтарят хоризонтално и вертикално, докато е време, докато не може да се вмъкват в един блок. Според това поведение, можете лесно да се управлява. За да направите това, използвайте фон-повторение имота, който има 4 основни ценности:
Повторете - настройката по подразбиране, картинката се повтаря и от двете страни;
Повторете-х - повтаряща се само на ОИК х;
Повторете-Y - повтаря само аксиално у;
No-повторение - няма да се повтори най-малко;
Всяка стойност можете да се регистрирате и да видим какво ще стане. Аз предписва, както следва:
Сега повторение само хоризонтално. Ако предписва никой не се повтаря, че ще бъде само на една снимка.
Отлично, това вече е възможно да се завърши, тъй като това е основната възможност за работа с фона, но аз ще ви покажа още 2 имота, които ви позволяват да получите повече възможности за управление.
Чрез повтаряне оформление постигнат преди това, които създават фон на текстурата наклони и с помощта на един малък образ. Тя може да бъде 30 до 10 пиксела или по-малко. И може би малко повече. Изображението бе такава, че когато тя се повтаря в една или дори от двете страни, не е имало видими преходи, в резултат на което едно парче получава фон. Между другото, трябва да се използва този подход, както и сега, ако искате да използвате, безшевни текстура на своята интернет страница като фон. Наклонът сега е възможно да се прилагат методи CSS3, за това ние все още определено говори.
разположението на фона
По подразбиране, фоново изображение, ако не зададете повторение за него ще бъде в горния ляв ъгъл на вашия блок. Но ситуацията може лесно да бъде променена с помощта на имот фон-позиция.
с молба да бъде различен. Единият вариант е просто да се уточни частта, където трябва да бъде на снимката:
Т.е. вертикално всичките останали: фоново изображение е на върха, но ние сме се променили хоризонталната страна в дясно, че е прав. Друг начин да се определи позицията - като процент. Срокът тече в този във всеки случай от горния ляв ъгъл. 100% - на целия блок. Така че, да се сложи на снимката точно в центъра, така че ние може да пише:
Не забравяйте едно важно нещо, свързано с позициониране - първият параметър винаги се определя хоризонтално положение, а вторият - вертикално. Така че, ако видите, че стойността от 80% до 20%, можем да заключим, че веднага фоновото изображение ще бъде значително измества надясно, но надолу в същото време силно не си отиде.
На последно място, можете да се регистрирате за позицията на пиксел. Всички едно и също, само че вместо% е пиксела. В някои случаи може да се наложи и като позициониране.
стенография
Вие се съгласявате, че кодовете са доста тромави, ако всички попитам както направихме. Оказва се, и пътя до изображението, което искате да се уточни, а повторението и позиция. Разбира се, повторението и позицията не винаги е необходимо, но във всеки случай, по-правилно да се използва съкратеното имота. Тя изглежда така:
Това е първото нещо, което да направите, е да се запише общо плътен цвят за фон, ако желаете. След това по пътя към изображението и повторение на позицията. Ако не е необходим параметър, просто я пропуснете. Съгласен съм толкова много по-бързо и по-удобно, но и ние значително да намали нашия код. По принцип, аз ви съветваме да си запишете в кратък период от време, дори и ако имате нужда само уточни цвят или изображение.
След това ще разгледаме още един имот - с размерите на заден план. Той вече не е zadash съкратено като параметри в стенограмите.
Ние контролираме размера на фоновото изображение
Сегашната ни образ не е много добре пригоден за доказване на следващия трик, така че аз ще взема друг. В размер, тя нека да бъде като блок или по-голяма. Така че, представете си, че сте изправени пред предизвикателството: да фоновото изображение, така че да изпълва вашия пакет не е напълно. Една снимка, например, дори и по-големи размери на блок.
Как мога да направя в този случай? Разбира се, най-лесният и най-разумният вариант е да се просто намаляване на изображението, но не винаги имат възможност да го направят. Да кажем, че е на сървъра и в момента няма време и възможности, за да го намали. Проблемът може да бъде решен с помощта на имот фон-размер, който може да бъде наречен сравнително нов, и която позволява да се манипулира с размерите на фоново изображение, и като цяло всеки фон.
Така че моята снимка сега заема цялото пространство в блока, но аз ще я питам фон Размер:
Отново, първия параметър определя размера на хоризонталата, второ - вертикално. Ние виждаме, че всичко е приложена правилно -photo размер от 80% ширина блок широк и половина височина. След това само трябва да се направи едно уточнение - определяне на размера като процент, можете да влияете на пропорциите на изображението. Така че бъдете внимателни, ако не искате да наруши пропорциите.
Както можете да си представите, като размерът на заден план може да бъде определен в пиксели. И все пак има две ключови думи са стойности, които могат да бъдат използвани:
Cover - ще мащабирате изображението, така че най-малко от едната страна на изпълва изцяло блока.
Съдържа - ще мащаб, така че картината е напълно да влезе в блока в максималния си размер.
Ползите от тези стойности е, че те не се променят пропорциите на изображението, да ги оставят без изменение.
Също така трябва да се разбере, че разтягане на изображението може да доведе до влошаване на качеството му. Мога да дам един пример от живота и реалната практика на ПДО. Всеки знае и разбира, че налагането на настолен трябва да се адаптират на ширината на обекта под главната монитора: 1280, 1366, 1920. Ако сте приели размера на, да кажем, фоново изображение 1280 200, и не питай я фон размери, толкова по-голяма от ширината на екрана празно място, картината не е напълно изпълва ширината.
В 99% от случаите не е доволен от разработчика, така че задава фон-размер: капак, така че картината е винаги разтегне до максималната ширина на прозореца. Това е добра техника, за да се използва, но сега се сблъскват с проблема, че потребителите на ширината на екрана на 1920 пиксела могат да видят картината на неоптимално качество.
Напомням ви, че ще се удължи до максималната ширина. Съответно, качеството е по-лошо автоматично. Единственото решение е да се използва оригиналното изображение по-голям - 1920 пиксела широчина. След това в най-широк екран, че ще бъде в естествения си размер, а други просто постепенно ще бъдат отрязани, но в същото време, с правилен подбор на фоновото изображение, то няма да се отрази на външния вид на сайта.
Като цяло, това е само един пример за това как да се използват знанията, придобити от вас в тази статия, по време на оформлението на макета.
Полу-прозрачен фон използване CSS
Друга особеност, която може да се осъществява чрез използване на CSS - полупрозрачен фон. Това означава, че през този фон ще бъде възможно да се види какво се крие зад него.
Например, аз питам цялата страница като фоново изображение, което се използва в по-ранните примери. Блок със същия идентификатор бг, където прекарваме всички наши експерименти, ние определяме фонов цвят с помощта RGBA определят формата.
Първата стойност в скоби е размерът на червено, след това зелено, след това синьо. Стойността може да бъде число от 0 до 255. Съответно, формата не се различава RGBA, натрупват само един параметър - алфа канал. Стойността може да бъде от 0 до 1, където 0 - пълна прозрачност.
В съответствие с това е необходимо да се напише нещо като това да определи средна прозрачност:
Нека да настроите цвета на фона на блок, това е това, което получавате:
Как да зададете текста на фона?
До тогава, ние се считат за фон на работни места за блокови елементи. Но какво, ако е необходимо да настроите фона е текстът? Решението тук е проста: на заден план е необходимо да се регистрирате ред елемент, на който е написан текста. Така че, на първо място трябва да се създаде договорената покупка. По подразбиране, тези цели предлагат да се използва от време.
На нас ни трябва само за вас, за да бъде в състояние да се превърне в нашия CSS Spanu, че сега сме добре и ще направите:
Всичко работи. В действителност, във фонов режим, можете дори да настроите картината, но аз не разбирам защо това е необходимо. Може би в някои случаи това може по някакъв начин да се прилага.
Повече възможности за фон на създаване и управление
Така че ние погледна към вас, като в CSS да се направи на заден план. Но това не е всичко, което ни предлага CSS. По принцип, всички нови възможности са се появили благодарение CSS3. Например, линейна и радиална градиент множественото число фон нови стойности за повторение, и т.н. Всички тези функции значително се опрости работата на уеб разработчик.
Например, за да се направи преди 2 или повече фонови изображения, трябваше да се създаде някои блокове и да поиска всяка от тях разполага със собствен фон. Заоблен ъгъл е истински проблем, така че тя да дойде до точката, че аз се опитвам да не се използва закръгляване, защото изпълнението му бе твърде сложно.
Ето защо, ако имате желание да се разбере по-нататък на заден план, препоръчвам ви да премине курса ни за CSS3. Между другото, къде ще се научите не само да работи с фона, но добавя елемент на сянка, да използват нови селектори, поставете декоративни рамки и т.н. CSS3 ни е дал редица нови и интересни функции.
Най-IT новини и уеб разработки на нашия канал Телеграма
