Как да направите HTML сайт фона на позиция, повторение и т.н.
Само за няколко години в интернет открих редица полезни сайтове и услуги, които не са пряко свързани с изграждането на обекта и основната тема на този блог, но аз просто исках да ги препоръчвам и на вас:
Cashback услуги. като Epn.bz и Letishops. Първият ще спестите до 15% от Aliekspress и втората ограничавам с Cash Back на повече от 1000 онлайн магазини. Търсене на полети, просто отлично обслужване - Aviasales.ru. Търсения на стотици сайтове и предоставя всички възможности за билети, можете да изберете най-евтините или тези, където има по-малко време за пътуване. Те също имат голяма тълпа. приложения и браузър плъгин.
Тъй като изпълнението на тази цел, ние се нуждаем от CSS-файл, трябва да се създаде и да се свържете към HTML. Това е написано в тази статия. След това можете да започнете да работа. На първо място, трябва да се реши с това, което искате да зададете на заден план. Ако цялата страница като цяло, може да се направи, както следва:
Фон-цвят: бял;
>
Тоест, ние гледаме към тялото маркер. което представлява цялата нашия уебсайт. За да зададете цвета на фона с помощта на фон-цвят собственост. Но какво, ако е необходимо да настроите като фоново изображение, а не плътен цвят? След това е необходимо да се напише така:
Фон на изображение: URL (път към модел risunku.rasshirenie)
>
За по-голяма яснота, аз предлагам да се помисли за всички подробности за примера. За да направите това, ще използвам тази снимка:
Например, фон изображение: URL (comp.png). В този пример, ние сме зададете фоново изображение с името на комп (това е, което се обадих на него) формат PNG, който се намира в същата папка, като CSS-файл.
HTML кодът ще създаде произволен блок със специфични размери, за да го покажете на работните с CSS свойства.
И стилове за нея:
#ct Предшестващо изображение: URL (comp.png);
ширина: 600px;
Височина: 400 пиксела;
>
Това е, което ние имаме:
Защо така? Фактът, че браузърът по подразбиране се повтаря картинката толкова пъти, колкото напълно да го запълни. Понякога е необходимо и, например, при използване на безшевни модели, но в този случай трябва да бъде една снимка. За щастие, това може да бъде много лесно да се управлява.
повтарящ се фон
Ако имате снимка като фон, а след това по подразбиране ще се повтори хоризонтално и вертикално, за да запълни цялото пространство на страницата. За да я премахнете, използвайте фон-повторение имот и стойността му не-повторение (да не се повтаря). Също така има следните стойности:
- Повторете-х - да се повтаря само хоризонтално
- Повторете-годишна - само вертикално
Попълнете свойствата на нашия графичен фон:
Фон-позиция собственост определя на място, където няма да има снимка. Има две стойности са дадени - както хоризонтално и вертикално. Примери: фон-позиция: долния десен - позицията на долния десен ъгъл, горе вляво - за понижаване на върха (и така по подразбиране), 250 пиксела на 500 пиксела - компенсирани от горния ляв ъгъл на правото от 250 пиксела и 500 надолу.
Нека разгледаме един пример:
фон-позиция: горния десен;
Снимка трансфер в горния десен край. Дадох на устройството и жълт фон, така че можете да видите по ръбовете.
фон-позиция: 50% до 50%;
Изображението ще се появи точно в средата на своя блок. Да, това също е възможно, благодарение на интереса позиция на разрешен запис.
фон-позиция: 70% 20%;
Предшестващо изместен на 70% хоризонтално и вертикално 20.
Разрешение също е в пиксели определят отрицателна стойност позиция. Допустимо е да се направи, например, когато използвате голям спрайт имидж и трябва да се постави в кутиите трябва да е част от този спрайт.
Осигуряване на фона
Аз наистина харесвам една функция, наречена фон-привързаност. Той има само две стойности, а първият е по подразбиране (превъртане). Това означава, че когато превъртате фона на страницата, също ще бъдат превъртат, а ако сте с помощта на снимка без повторение, в края на краищата го завършим и след това отидете просто плътен цвят.
За да избегнете това, предписан фон-привързаност: фиксирани и сега нашето минало е фиксиран на място. Това може да се сравни с начина, по който устройството да се определи фиксиран позициониране, и той няма да изчезне от страницата, когато преминете през него.
Съкратено за всички тези неща
Ние сме демонтирани много свойства, които дават възможност да се направи на заден план, но ако използвате всички тях, това е грозно рекорд. Има много елегантно решение. фон имот позволява разделени с интервал, за да напишете вашите настройки в този ред:
Предшестващо състояние: цветно изображение повторение осигуряване позиция;
И сега тя може да се изписва така:
фон: жълт URL (comp.png) никой не се повтаря 20% 100px;
Ако някой не е нужно да се определи собствеността, тя просто се пропуска (в нашия случай, ние не завежда фон-прикачения файл).
много фонове
И какво, ако имате нужда от повече фонови изображения? Случва се, какво можеш да направиш. Днес CSS го поддържа. Нека и ние ще се опитаме. Вземете тази икона
Обадих се на лаптопа си.
А ето и кода за вмъкване MultiFon:
фон: URL (comp.png) никой не се повтаря 20% 100 пиксела,
URL (laptop.png) никой не се повтаря 50% 50%;
фон-цвят: жълт;
Както можете да видите, просто достатъчно да се постави запетая след първото изображение и да се регистрирате настройките за втория. Плътен цвят в този случай е по-добре да попитам отделно.
По същия начин може да се запише на произволен брой снимки, но не прекалявайте - твърде много графики не е много добро.
Тук, на това, бих искал да завърша тази статия. На фона можете да направите много други интересни неща за тях ще се опитам да пиша за в бъдеще (като нещо, което вече е написано - например тук). Успешна да изследвате този имот.