CSS прозрачност фон. Прозрачен фон или текст с CSS

С появата на CSS3 уеб дизайнери работят в много отношения е по-лесно и по-логично: в края на краищата, сега можете да наистина гъвкаво персонализирате всеки обект, по-рядко се прибягва до JavaScript. Да речем, че се наложи да настроите прозрачността на фона - CSS веднага предлага няколко опции.

Предшестващо определя от набор от атрибути (фон-изображения, фон-позиция , фон размер, фон-повторение, фон-свързване, фон-произход, фон-клип, фон цвят), всеки от които могат да бъдат отнесени по отделно или в комбинация по признака фон. Нека разгледаме всеки един от тях в детайли.

Умение фон-цвят

В CSS, цвета на фона може да се настрои по няколко начина: с помощта на код шестнадесетичен, цвят име или RGB влизане. В CSS3 стана възможно да се използва вместо опция RGB-запис с RGBA.

Шестнадесетичен код на цвят, се записва в имота след решетката: фон-цвят: # FFDAB9. Ако героите в този пост, са същите двойки, кодът обикновено е малко нарязани: # ccff00 може да се запише като # cf0:

тяло {фон цвят: # cf0 ;}.

Името е, дори и в най-екзотичните цветове. Така например, в допълнение към стандартния червено и бяло можете да използвате NavajoWhite (#FFDEAD) или Honeydew2 (# E0EEE0):

тяло {фон цвят: лилав; }.

Вторият вариант е RGB или влизане RGBA ви позволява да посочите не само цвета, но и прозрачността на CSS заден план, но методът работи само в IE версии по-стари от 9. Други браузъри разпознават нормалната версия с прозрачността. Според стандартите на W3C за предпочитане е да се използват още RGBA вместо по-обичайната RGB.

Последната стойност в RGBA фон и определя непрозрачността от 0 (прозрачен) до 1 (непрозрачна).

Има някои необичайни стойности. Цветът на фона може да се настрои с помощта на HSL и HSLA. И двамата бяха добавени към CSS3, и по тази причина не се поддържат от IE версия 9 или по-висока. Изпълнения идентичен RGB или RGBA, само в различен формат: Хю (сянка - стойност на колелото на цветовете, е дадена в градуси), наситен (насищане - цвят интензивност в проценти от 0 до 100), лекота (лекота - яркост, измерени по подобен начин параметър насищане ).

Умение фон изображение

Най-версия на прозрачен фон различни браузъри - това е използването на изображението. В CSS3, можете да зададете още повече изображения, това се прави чрез запетая. например:

{Фон тяло изображение: URL (bg1.png), URL (bg2.png)}.

Този начин на подкрепа дори IE8. Няколко снимки на фона на каучука, използван в оформлението. Важно е, не забравяйте да използвате всяко изображение и да зададете цвета на фона в CSS, тъй като потребителите могат просто да качите изображение.

Умение фон-позиция

Ако използвате по-голям, за да зададете фон единица, CSS ви позволява да позиционирате изображението място на екрана. По подразбиране изображението се намира в горния ляв ъгъл. Умение отнема или устни инструкции (горе, долу, ляво, дясно), цифров (лихви, пиксели и други единици). В този случай, трябва да посочите две стойности, хоризонтални и вертикални:

тяло {фон-позиция: десен център ;} - в този пример, моделът ще бъде разположен от дясната страна на страницата, на горната и долната част на разстоянието на изображението на същото.

Умение фон размер

Понякога е необходимо да се простират на CSS фона или да намали размера му. За да направите това, използвайте атрибута фон-размер и размера на заден план може да се зададе в пиксели или проценти, както и всички други единици.

С този атрибут, има някои проблеми: за да се използва правилно показване на фона на по-ранните версии на префиксите на браузъра. Разбира се, настоящата версия напълно подкрепя този атрибут и необходимостта от специфични качества изчезна.

Умение фон-закрепване

Този атрибут определя поведението на фонови изображения, докато се движи. Така че, може да отнеме 3 стойности (без да се включва наследява, общата сума за всички атрибути обсъждат в тази статия):

• фиксиран - прави картината на фона на фиксирани;
• превъртете - фонови свитъци с останалата част от елементите;
• местно - изображението на фона се превъртат ако превъртане има съдържание. Предистория, който излиза извън съдържанието на рамката е фиксиран.

Пример за приложение:

тяло {фон-закрепване фиксирана}.

В момента Firefox не поддържа последната имота (местни).

Умение фон-произход

Този атрибут е отговорен за елемент позициониране. Ранните браузъри изискват използването на представки. Самият имот се състои от три параметъра:

• подложка кутия е разположена спрямо модела на ръба, като се вземат предвид дебелината на рамката;
• гранично-кутията свойства са различни от предишните по това, че граничната линия може да бъде напълно или частично се припокриват на модела;
• съдържание кутия позициониране на изображението pryavyazyvaya неговото съдържание.

Ако посочите повече от една стойност, а след това браузъри могат да реагират по свой начин: Firefox и Opera възприемат само първата опция.

Умение фон-повторение

Като правило, ако не е зададен фоновото изображение, то трябва да се повтори, хоризонтално или вертикално. За това и се използва атрибут фон-повторение. По този начин, блок фон, CSS, който съдържа такъв имот може да има една от няколко параметъра:

• никой не се повтаря - изображението се показва на страница в един вариант;
• повтаря - фон се повтаря в х и у;
• Повтарям-х - само хоризонтално;
• повтаря-Y - само вертикално;
• пространство - фон се повтаря, но ако пространството е невъзможно да се попълнят между снимките е празен;
• кръг - изображението се мащабира, ако тя не се запълни цялата площ на цели картини.

Пример на атрибутите:

тяло {фон-повторение: няма подобен повторение повторение} - подобен фон-повторение: повтаря-у.

В CSS3 може да определи стойности за няколко изображения при изброяване на параметъра, разделени със запетаи.

Умение фон-клип

Този атрибут определя поведението на фона под границите (например, в случай на пунктирани рамки):

• уплътнение кутия - фон показва във вътрешността на блока;
• граница кутия - образът попада в рамка;
• съдържание кутия - на снимката на фона ще се появи само в рамките на съдържанието.

Пример за приложение:

тяло {фон-клип: към съдържанието кутия;}.

Хром и Safari изисква -webkit- префикс.

Непрозрачност атрибути и филтър

непрозрачност атрибут позволява да настроите прозрачността на фона - CSS собственост ще работи във всички браузъри. Като стойност се задава в границите от 0,0 до 1,0 включително. В този случай, можете да настроите прозрачността на CSS фона не целочислена стойност, вместо 0.3 е достатъчно да напишете 0.3:

.block {фон изображение: URL ( img.png); непрозрачност: 0.3;}.

За да зададете фон непрозрачността, CSS е подходящ дори и за IE под деветата версия, използвайте филтър атрибут:

.block {фон изображение: URL ( img.png); филтър: алфа (непрозрачност = 30)}.

В този случай, стойността на непрозрачност се намира между 0 и 100. Имайте предвид, че непрозрачността приписват различни настройки за прозрачност чрез RGBA наследство: при използване на непрозрачност става ясно не само на заден план, но и всички елементи във вътрешността на устройството.

Винаги следи статистика за употребата на браузъри от ОНД, както и всички други страни. Най-големият проблем на всички DTP - по-старите версии на IE, те не ви позволяват да използвате пълната степен CSS3. В оформлението не забравяйте да използвате специалните служби, които проверяват дали вашият браузър поддържа всеки CSS собственост. Ако не можете да инсталирате по-стари версии на браузъри, да намерите услуга, която ще провери работата на сайта в различни браузъри онлайн.