Предисторията е важна част от уеб страницата. По подразбиране той има бял цвят. Но HTML езикът предлага няколко възможности за промяна на неговите свойства. В интернет, повечето сайтове - с колоритен фон, включително и анимация. Те имат различни графики или фонови изображения. Задаването на фонов стил за уеб сайтове се извършва с помощта на атрибута - фон в HTML. Има няколко свойства на CSS, които се използват за задаване на фона на елемента.
Атрибути за промяна на настройките на фона
В код, написан на HTML, фонът се задава за цялата страница, както и за отделните й елементи. Преди това е използван таг, но сега тази практика се счита за остаряла. Атрибутът е приложен към спецификация 401 и е записана в HTML :. Сега най-лесният начин да промените стойността по подразбиране е да зададете свойствата на атрибута background-color за маркера.
Има пет основни атрибута, които се използват в HTML и CSS за промяна на фона:
- color - показва кой цвят ще се използва за наводняване;
-изображение - задава изображението за фона;
-позиция - Показва къде да се постави фоновото изображение;
-повторение - определя дали изображението се повтаря;
- прикрепване - определя дали изображението ще се превърта заедно със страницата;
-size - задава фона на определен размер;
-оригина - определя зоната за позициониране на фоновото изображение;
-clip - Определя как да се показва фоново изображение или цвят на фона под границите на даден елемент.
Първопет свойства могат да бъдат комбинирани в един кратък атрибут - фон. Атрибутът работи във Firefox, Safari, Opera, IE8 браузъри. Само в остарели IE7 и IE6 фонът не включва граници.
Как да промените цвета на фона в HTML
Атрибутът "фон цвят" (HTML и CSS) запълва страниците с плътен цвят. Има няколко начина за задаване на цвят с различни формати:
-цветно: червено;
-цвет: rgb (00255);
-цвет: # 2500ff.
Може да се зададе прозрачно свойство на фона, което съответства на степента на прозрачност и позволява всички елементи отдолу да бъдат видими.
Как да зададете фоново изображение
Background-image е свойство, което ви позволява да зададете изображение, което ще се показва вместо фона. Той се посочва с помощта на CSS кода и HTML езика: background-image: url (image.jpg). Кодът е много прост, но за да работи, изображението трябва да е в същата папка като файловете със стилове. Ако случаят не е такъв, в скобите трябва да се посочи правилния адрес, например: background-image: url (images /image.jpg). Фоновото изображение може да се използва заедно с фоновия цвят. Ако тя не се повтаря, то другата, която не е обхваната от пространството на картината, ще има цвета, посочен в това свойство.
Предистория
CSS атрибутът и HTML фоновата позиция контролират местоположението на фоновото изображение и определя къде се намира в елемента. Използвайте го, за да укажете къде ще се намира горният ляв ъгъл на изображението спрямо горния ляв ъгъл на елемента. Първо, в свойството позицията е написана на хоризонталната координатна ос, а след това - на вертикалата. За да направите товапо-лесно е да се използват пиксели. Например:
-позиция: 0 0 - използва се по подразбиране и указва местоположението на фона в горния ляв ъгъл на елемента;
-позиция: 100px 0 - преместване на изображението надясно;
-позиция: -100px 0 - преместване на изображението вляво;
-позиция: 0100px - намалете изображението.
Атрибутът background-position работи и с други стойности, ключови думи и проценти. Те могат да бъдат полезни, ако размерът на елемента не е определен в пиксели.
Как да се използват ключови думи за позициониране на фона
Ключовите думи могат да се използват за определяне на координатите по хоризонталната и вертикалната ос, няма значение в каква последователност се записват. Вариации на ключовите думи за хоризонталната ос:
наляво;
център;
вдясно.
За вертикалната ос:
отгоре;
център;
отдолу.
Когато се работи с други мерни единици, координатите първо се определят по хоризонталната ос, а след това по вертикалата. Например, фонова позиция: долу вдясно. Лихвените проценти се използват по същия начин. В този случай отброяването се намира в горния ляв ъгъл на прозореца на браузъра. Пример за използване на лихвата: фонова позиция: 100% 50%. Това означава, че изображението се измества надясно и ще бъде в центъра на дясната част на елемента. Същият ефект може да се постигне, ако използвате имота: десния център. Ако използвате стойността на фоновата позиция: 100% 100%, тогава фонът ще се появи в долния десен ъгъл на елемента.
Повторение на фон
По подразбиране, когато изображението е настроено наКачеството на фона се повтаря хоризонтално и вертикално, докато се запълни целият прозорец или елемент на браузъра. Но понякога се изисква изображението да се показва само веднъж или да се намира само в една посока. За да направите това, CSS и HTML за фон изискват следните атрибути:
-повторение: повторение - по подразбиране, изображението се повтаря, докато елементът се запълни напълно;
-повторение: без повторение - изображението не се повтаря и се използва на страницата само веднъж;
-повторение: повторение-x - повторение само по хоризонталната ос;
-повторение: повторение-y - повтаря се само по вертикалната ос;
-repeat: inherit - браузърът използва стойността, присвоена на родителския елемент.
Атрибут за лента за превъртане
HTML background-attachment определя какво се случва с картината, когато потребителят превърта през страница. Този атрибут има няколко свойства: превъртане, фиксиране и наследяване. Наследявайте съобщенията, че прикаченият фон наследява собствеността на неговия родител. За правилното използване на фона-прикачен файл, трябва да помислите как потребителят ще взаимодейства с екрана. Viewer е част от браузъра ви, която показва уеб страница. Когато преглеждате сайта, той не се движи. Вместо това съдържанието на страницата се превърта нагоре, но изглежда, че страницата се превърта надолу в прозореца на браузъра.
Когато настройвате HTML background-attachment: scroll свойството, на браузъра се казва, че фонът трябва да се превърти заедно с елемента. Фонът "се придържа" към елемента и се превърта, докато изчезне. Това е всичкостойността по подразбиране за прикачен фон. Но когато фона-прикачен файл: фиксирано свойство е зададено, тогава фонът трябва да остане на място и да не се движи заедно със съдържанието. Когато превъртате надолу по страницата, тя винаги остава видима.
Как да се запишат кратко характеристиките на фона
Вместо да се налага всеки път да се записват всички тези правила поотделно, можете да ги комбинирате в едно и да ги напишете, както следва: background :. И не е необходимо да посочвате всяка стойност поотделно. Ако собствеността не се използва, вместо нея ще се използва стойността по подразбиране. Важно е да се отбележи, че фоновото изображение се появява само в онези области, в които присъства родителският елемент. Дори когато е разположен спрямо прозореца на браузъра, той няма да се покаже, ако родителският му елемент не е видим. Можете да използвате повече от едно изображение за фона на елемента в CSS3. Кодът ще бъде същият като CSS2, само отделните адреси на изображения трябва да бъдат разделени със запетая. Първият ще бъде разположен в горната част на елемента, а следващият ще се слее в него.
Свойство размер на фона
Понякога сайтът трябва да определи фон от определен размер. Атрибут, който се използва за това в HTML - размер на фона. Това свойство има няколко възможни стойности:
-размер: съдържа - мащабира изображението, така че да съвпада с елемента, като същевременно поддържа съотношението на растерните изображения;
-size: cover - Разширява изображението, за да запълни елемента, запазвайки пропорциите;
- размер: 100px 100px - мащабира изображението до определения размер;
- размер: 50% 100% - Мащабира изображението до определения размер, процентът се отнася за размера на елемента. Размерът на фона в HTML за Firefox до версия 4.0 е зададен като свойство по подразбиране -moz-background-size. По подобен начин за версията на Opera 1053 трябва да предпишете -o-background-size.
свойство фон-произход
Свойството за произход на фона се използва във връзка с фоновата позиция за позициониране на фоновото изображение. Прилага се, ако фоновото прикачване е фиксирано. Неговите параметри могат да бъдат изведени от границите, вдлъбнатините или съдържанието на даден елемент.
- произход: гранична кутия; фон - позиция се изчислява от границата.
-изход: подложка-кутия; фона - позицията се изчислява от полето на запълване.
-изход: съдържание-кутия; background - Позицията се изчислява въз основа на съдържанието на елемента.
Възможности за използване на фоновото изображение
В допълнение към очевидните декоративни предимства на фона, той може да се използва и за други цели. Например, ако добавите свойство CSS float към елементи на компенсиране, е трудно да се гарантира, че две или повече колони се показват една и съща ширина. Ако те са различни, фонът на една от колоните ще завърши преди фона на другата. Този ефект може да се избегне, ако използвате отделен фон за всяка колона. Но е много по-лесно да приложите едно фоново изображение към родителския им елемент. Друго възможно приложение е декорирането на неподредени списъци. Bulites в тях може да не изглежда много привлекателна, така че те са по-добре да се скрие и да ги замени с фоново изображение.
Шрифтове вместо фон в html: фонов шрифт
Избор на шрифт зарегистрацията на сайтове в интернет е много ограничена. Можете да създавате оригинални шрифтове, но те изискват от потребителя да активира поддръжката на JavaScript. По-просто решение, което работи във всеки браузър, създавайки картина от текста и използвайки го като фон за елемент. Ако искате текстът да остане в маркировката за търсачките и екранните четци, просто задайте клас на елемент, оставете текста в описанието и добавете картина чрез CSS. В този случай браузърите ще покажат надписа с помощта на не-потребителски шрифтове, а именно избрания от дизайнера.
Ново свойство background-break
CSS3 има нова функция: елементите могат да бъдат разделени на отделни блокове, редове и страници. Свойството background-break определя как да се показва фон в различни прозорци. Възможни стойности:
- прекъсване: непрекъснато - стойността по подразбиране. Третира блоковете така, сякаш между тях няма място;
-разкъсване: ограничителна кутия - отчита пространството между блоковете;
- прекъсване: всеки кутия - обработва всеки блок в елемент поотделно и отново рисува фона поотделно за всеки от тях.
Има много други свойства, които помагат да се персонализира показването на фона, тук са най-често описаните. Знанието идва с опит, така че практиката е най-добрият начин да научите CSS и HTML.
