CSS Background Transparency. Прозрачен фон или текст, използващи CSS

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

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

Атрибутът на цвета на фона

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

Шестнадесетичен цветен код е написан насобственост след решетката: background-color: # 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 можете да зададете дори няколко изображения, това става чрез запетая. например:

тяло {background-image: url (bg1.png), url (bg2.png)}.

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

Атрибутът на позицията на фона

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

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

Атрибутът за размер на фона

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

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

Атрибутът за закрепване на фона

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

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

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

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

Понастоящем Firefox не поддържа последната собственост (локално).

Атрибутът за произход

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

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

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

Атрибутът за повторение на фона

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

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

Пример за използване на атрибут:

тяло {background-repeat: no-repeat repeat} - подобно background-repeat: повтарям-у.

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

Атрибутът на фоновия клип

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

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

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

тяло {background-clip: content-box;}.

Chrome и Safari изискват използването на префикс -webkit.

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

Атрибутът за непрозрачност ви позволява да зададете прозрачностbackground - собствеността на CSS ще работи във всички браузъри. Стойността е зададена от 0.0 до 1.0 включително. По този начин можете да зададете прозрачността на CSS фон без цяло число: вместо 0.3, достатъчно е да напишете .3:

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

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

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

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

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

</ p>>