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

С настъпването на CSS3 работата на дизайнерите на оформлението стана много по-опростена и по-логична: сега е възможно наистина гъвкаво да конфигурирате даден обект, още по-рядко използвайки jаvascript. Да приемем, че трябва да настроите прозрачността на фона - 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.jpg), url (bg2.jpg)}.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.блок {background-image: url (img.jpg) - непрозрачност: .3-}.

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

.блок {background-image: url (img.jpg) - филтър: алфа (непрозрачност = 30) -}.

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

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