CSS транспарентност позадина. Транспарентна позадина или текст со CSS

Со доаѓањето на CSS3 веб дизајнери работат во многу начини стана полесно и повеќе логично: По сите, вие сега може навистина флексибилно да изберете кој било објект, поретко се прибегнува кон JavaScript. Да речеме, ти треба да се прилагоди на транспарентноста на позадина - CSS веднаш нуди неколку опции.

Позадина е дефинирано од страна на група на атрибути (позадина-слика, позадина-позиција , позадина големина, позадина-повторам, позадина-прилог, позадина потекло, позадина-клип, background-color), од кои секоја може да се доделуваат одделно или во комбинација под атрибутот позадина. Дозволете ни да се испита секоја од нив во детали.

Атрибут background-color

Во CSS, боја на позадината може да се постави на неколку начини: со користење на хексадецимален код, име на бојата или RGB влез. Во CSS3 стана можно да се користи наместо на опцијата RGB-снимка со RGBA.

Двојна боја кодот е снимен во сопственост по решетката: background-color: # FFDAB9. Ако ликовите во овој запис се исти пара, го кодот е обично малку сече: # ccff00 може да се запише како # cf0:

тело {background-color: # cf0 ;}.

Името е, дури и во повеќето егзотични бои. На пример, во дополнение на стандардната црвена и бела боја можете да го користите NavajoWhite (#FFDEAD) или Honeydew2 (# E0EEE0):

тело {background-color: виолетова; }.

Втората опција е 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 ти овозможува да позиција на сликата каде било на екранот. Стандардно, на сликата се наоѓа во горниот лев агол. Атрибут потребно или вербални инструкции (горе, долу, лево, десно), нумеричка (камата, пиксели и други единици). Во овој случај, мора да се определи две вредности, хоризонтална и вертикална:

тело {background-позиција: право центар ;} - во овој пример, моделот ќе се наоѓа на десната страна на страницата, на врвот и на дното на растојание сликата на истиот.

Атрибут позадина големина

Понекогаш е потребно да се водат на CSS позадина или да се намали нејзината големина. За да го направите ова, користете атрибут позадина големина, а големината на позадина може да се постави во пиксели или проценти, како и сите други единици.

Со овој атрибут, постојат некои проблеми: за да се користи правилно прикажување на позадина во претходните верзии на префикси прелистувачот. Се разбира, тековната верзија целосно го поддржува овој атрибут и потребата за специфични својства исчезна.

Атрибут позадина-прилогот

Овој атрибут го одредува однесувањето на слики во позадина додека лизгање. Значи, тоа може да потрае 3 вредности (не вклучувајќи го наследува, вкупно за сите атрибути се дискутира во овој напис):

• фиксна - прави слика на позадината на фиксна;
• движете - позадина свитоци со останатите елементи;
• локални - сликата на позадината е лизгање надолу, доколку има содржина. Позадина која оди подалеку од содржината на рамката е фиксна.

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

тело {позадина-прикачување фиксна}.

Во моментов, на Firefox не поддржува последните имот (локално).

Атрибут позадина потекло

Овој атрибут е одговорен за елементот позиционирање. Почетокот на пребарувачи бара употреба на префикси. На имотот себе има три параметри:

• Соочи-кутија е позициониран во однос на шемата на работ, а земајќи во предвид дебелината на рамката;
• граница кутија својства различни од претходните во кои граничната линија може да биде целосно или делумно се поклопуваат со шема;
• содржина кутија позиционирање сликата pryavyazyvaya нејзината содржина.

Ако одредите повеќе вредности, тогаш прелистувачи може да реагира на свој начин: Firefox и Opera гледаат само првата опција.

Атрибут позадина-повторам

Како по правило, ако е наведен како слика за позадина, тоа мора да се повтори хоризонтално или вертикално. За ова и се користи атрибутот позадина-повторам. Така, блок позадина, CSS, која содржи таков имот може да има една на неколку параметри:

• не-повторуваат - сликата се појавува на страница во една верзија;
• се повторува - позадина се повторува во x и y;
• се повторува-x - само хоризонтално;
• се повторува-y - само вертикално;
• простор - позадина се повторува, но ако просторот е невозможно да се пополни во меѓу сликите се појавуваат празни;
• круг - на сликата се намалени, ако не го исполнува целиот простор на целата слика.

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

тело {позадина-повторам: не- повторувај повторувај} - слични позадина-повторам: се повторува-y.

Во CSS3 може да се определи вредности за повеќе слики при листањето параметри, разделени со запирки.

Атрибут позадина-клип

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

• Соочи кутија - позадина прикажани во внатрешноста на блок;
• граница кутија - сликата е под рамка;
• содржина кутија - сликата на позадината ќе се појави само во рамките на содржината.

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

тело {позадина-клип: на содржината кутија;}.

Chrom и Safari бараат -webkit- префикс.

Затемнетост атрибути и филтер

непроѕирноста атрибут овозможува да го поставите на транспарентноста на позадина - 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 сопственост. Ако не можете да инсталирате постари верзии на интернет прелистувачи, најдете услуга што ќе ја провери работата на сајт во повеќе прелистувачи онлајн.