Овај чланак ће вас упознати са концептом који ће вам помоћи да разумете непрозирност у и рећи вам како да контролишете овај параметар. Следећи смерници ће бити обрађени у овом чланку,
- Непрозирност у ЦСС-у
- Непрозирност наслеђена каскадним елементима
- РГБА подешавање атрибута за каскадне елементе
- Промене непрозирности на ефекту лебдења
Непрозирност позадине елемента корисно је подешавање карактеристика у ХТМЛ дизајну. Постављањем нивоа непрозирности (обрнуто од транспарентности), дизајнер може да контролише видљивост елемента кроз својство ЦСС опацити. Ово се обично користи као подешавање позадине када постоји каскада елемената постављених један изнад другог.
Најчешћи сценарио у којем се користи ова функција је следећи:
- Делимично прозирна слика позадине поставља се иза елемента текста.
- Слика у позадини је мутно видљива, тако да не доминира текстом испред.
- Слика може доћи у пуни фокус када корисник изричито одлучи да је види.
Можда бисте желели да прочитате на пре него што наставите са учењем о непрозирности ЦСС-а.
хасхмап вс хасхтабле у јави
За свеобухватну ЦСС лекцију посетите Едурека ЦСС Водич за почетнике . Добићете одличне информације о начину на који ће се ЦСС користити за проширивање ХТМЛ веб дизајна.
Настављамо са овим чланком о непрозирности у ЦСС-у
Непрозирност у ЦСС-у
У ЦСС-у се непрозирност поставља као нумеричка вредност у распону од 0,0 - 1,0. Вредности ближе нули представљају већу транспарентност, слика ће бити врло лака у видљивости. Почнимо са примером слике која се приказује са 50% прозирности. Погледајте Пример 1 доле.
Пример 1: Слика у позадини постављена на полу- транспарентност
имг {непрозирност: 0,5 филтер: алфа (непрозирност = 50) / * За ИЕ8 и старије * /} 
Пример 1: Резултат
Оригинална слика (100% непрозирност)
Слика са подешавањем непрозирности од 50%
У горњем примеру био је само један елемент - слика. Остали елементи се такође могу подесити помоћу параметра непрозирности, као што су текст, див елементи итд.
Настављамо са овим чланком о непрозирности у ЦСС-у
Непрозирност наслеђена каскадним елементима
Када се елементи слажу један преко другог, ако елемент позадине има поставку непрозирности, тада га наслеђују сви подређени елементи. Ово је предефинисана подешавања . То значи да ако је текстуални оквир постављен преко слике и слика има поставку непрозирности 0,5, тада ће и слика и елемент текста бити делимично видљиви.
Узмимо пример подређеног елемента текста постављеног преко слике ТОМ & ЈЕРРИ у следећем примеру. Подразумевани ефекат непрозирности можемо видети у примеру 2.
.цонтаинер {позиција: релативно поравнање текста: непрозирност по средини: 0,5} .центрирано {позиција: апсолутни врх: 50% лево: 50% трансформација: транслате (-50%, -50%) боја: плава величина фонта: 40пк} } ТОМ & ЈЕРРИПример 2: Текст наслеђује непрозирност од родитељске слике
Настављамо са овим чланком о непрозирности у ЦСС-у
РГБА подешавање атрибута за каскадне елементе
Постоји још један начин на који се непрозирност може контролисати каскадним елементима. Ако желите да на подређени елемент не утиче непрозирност његовог позадинског елемента, тада можете да га користите Подешавање РГБА атрибута .
Пример 3: Коришћење РГБА подешавања
позадина: ргба (76, 175, 80, 1.0) / * Слика нема поставку непрозирности * / / * Зелена подлога за текст са 100% непрозирности * / / * Текст плаве боје има 100% непрозирности * /
позадина: ргба (76, 175, 80, 0,4) / * Слика нема поставку непрозирности * / / * Зелена подлога за текст са 40% непрозирности * / / * Плави текст и даље се види са 100% непрозирности * /
Након РГБ кода боје, атрибут „а“ означава алфа . Тхе алфа параметар је број између 0,0 (потпуно провидан) и 1,0 (потпуно непрозиран).
Настављамо са овим чланком о непрозирности у ЦСС-у
Промене непрозирности на ефекту лебдења
У неким сценаријима веб дизајнери желе да се непрозирност разликује у зависности од тога да ли је корисник фокусиран на елемент или не. На пример, рецимо да је слика подразумевано постављена на 50% непрозирности. Међутим, када корисник задржи миш изнад слике, тада желимо да слика дође у пуни фокус са 100% непрозирности.
Пример 4 показује како се то ради.
Заједничке напомене:
- Подешавање непрозирности је алтернатива коришћењу атрибута „видљивост“ у ЦСС-у. Међутим, коришћење поставке непрозирности олакшава подешавање различитих степена транспарентности, у распону од нуле до пуне.
- Ниво непрозирности треба подесити након пажљивог тестирања у различитим прегледачима. Када је непрозирност постављена на ниске вредности, понекад текст или слика могу постати потпуно невидљиви или нечитљиви.
- Идеја употребе непрозирности је да се оштро фокусира на неке елементе, док други позадински елементи не одвлаче пажњу корисника. Тако су такви позадински елементи постављени са мањом непрозирношћу.
- У Интернет Екплореру, за ИЕ8 и старије верзије, својство непрозирности је подешавање „филтера“ у распону од 1 до 100. У свим осталим прегледачима креће се од 0 до 1.
Ово нас доводи до краја овог чланка о непрозирности у ЦСС-у.
Ако сте заинтересовани да сазнате више о веб-развоју, погледајте Едурека. Обука за сертификацију за веб развој ће вам помоћи да научите како да креирате импресивне веб локације помоћу ХТМЛ5, ЦСС3, Твиттер Боотстрап 3, јКуери и Гоогле АПИ-ја и примените их на Амазон Симпле Стораге Сервице (С3).
Ако сте и даље заинтересовани Ако имате било какво питање, можете га објавити у одељку за коментаре овог блога „Непровидност у ЦСС-у“ и јавићемо вам се што је пре могуће.