Позадина транспарентност ЦСС. Транспарент бацкгроунд или текста са ЦСС

Са појавом ЦСС3 веб дизајнера раде на много начина је постало лакше и логично: након свега, сада можете заиста флексибилно прилагодити било који објекат, ређе прибегавају ЈаваСцрипт. Рецимо да је потребно да подесите транспарентност позадине - ЦСС одмах нуди неколико опција.

Позадина дефинише скупом атрибута (бацкгроунд-имаге, бацкгроунд-положаја , позадина величине, бацкгроунд-репеат, бацкгроунд-везаност, бацкгроунд-поријекла, бацкгроунд-цлип, бацкгроунд-цолор), од којих сваки може бити додељена или одвојено комбиноване у атрибут позадина. Размотримо сваку од њих детаљно.

Атрибут бацкгроунд-цолор

У ЦСС, боја позадине се може подесити на неколико начина: помоћу хек код, име у боји или РГБ улазак. У ЦСС3 је постало могуће користити уместо опције РГБ снимање са РГБА на.

Хек код боје је уписана у имовини након решетке: бацкгроунд-цолор: # ФФДАБ9. Ако су ликови у овом записи су исти парови, код је обично мали рез: # ЦЦФФ00 може написати као # цф0:

боди {бацкгроунд-цолор: # цф0 ;}.

Име је, чак иу најтежим егзотичним бојама. На пример, поред стандардни црвени и бели можете користити Навајовхите (#ФФДЕАД) или Хонеидев2 (# Е0ЕЕЕ0):

боди {бацкгроунд-цолор: пурпле; }.

Ова друга опција је РГБ или РГБА улазак омогућава да одредите не само боју већ и транспарентност ЦСС позадине, али метод ради само у ИЕ верзије старијих од 9. Други претраживачи препознају нормалну верзију транспарентно. Према В3Ц стандардима пожељно је користити и даље РГБА уместо више уобичајеног РГБ.

Последњи вредност у РГБА позадини и поставља провидност од 0 (транспарент) до 1 (опакуе).

Постоје неке необичне вредности. Боја позадине се може подесити помоћу ХСЛ и ХСЛА. Обе су додати у ЦСС3, па стога нису подржава ИЕ верзија 9 или више. Извођења идентични РГБ или РГБА, само у другом формату: Хуе (нијанса - вредност на точку боја, је дат у степенима), Сатурате (засићености - интензитет боје као проценат од 0 до 100), Лигхтнесс (лакоћа - бригхтнесс, мерена слично параметар Сатурате ).

Атрибут бацкгроунд-имаге

Највише крст претраживач верзија транспарент бацкгроунд - то је употреба слике. У ЦСС3, можете поставити још више фотографија, то се ради кроз зарез. primer:

{Фонт-тело слика: урл ( 'бг1.пнг), урл (' бг2.пнг)}.

На овај начин подршке чак и ИЕ8. Неколико слика у позадини гуме користе у изгледу. Оно што је важно, не заборавите да користите било коју слику и поставите боју позадине у ЦСС, јер корисници могу једноставно отпремање слику.

Атрибут бацкгроунд-поситион

Ако користите слику да поставите позадинску јединицу, цсс вам омогућава да поставите слику било где на екрану. По дефаулту, слика се налази у горњем левом углу. Атрибут се или усмена упутства (горе, доле, лево, десно), а бројчану (интерес, пиксела и остале јединице). У том случају, морате навести две вредности, хоризонталне и вертикалне:

Тело {фонт-позиција: десни центар ;} - у овом примеру, образац ће се налазити на десној страни странице, на врху и дну слике удаљености од исте.

Атрибут бацкгроунд-сизе

Понекад је потребно да се растегне ЦСС позадину или смањити њену величину. Да бисте то урадили, користите атрибут бацкгроунд-сизе, и величину може да се подеси у пикселима или процентима позадини, и било које друге јединице.

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

Атрибут бацкгроунд-аттацхмент

Овај атрибут одређује понашање позадину док се креће. Дакле, може да узме 3 вредности (не укључујући наслеђују, укупно за све атрибуте расправља у овом чланку):

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

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

боди {бацкгроунд-аттацхмент фикед}.

Тренутно, Фирефок не подржава посљедњу имовину (локални).

Атрибут бацкгроунд-порекло

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

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

Ако наведете више вредности, онда претраживачи могу да реагују на свој начин: Фирефок и Опера виде само прву опцију.

Атрибут бацкгроунд-репеат

По правилу, ако је наведено у позадини слике, мора се хоризонтално или вертикално понавља. За ово и користи атрибут бацкгроунд-репеат. Стога, блоцк позадина, ЦСС који садржи такве особине могу имати једну од неколико параметара:

• не-понављање - слика појави на страници у једној верзији;
• Понављам - позадина се понавља у Кс и И;
• репеат-к - само хоризонтално;
• репеат-и - само вертикално;
• простор - позадина се понавља, али ако простор није могуће попунити између сликама приказује празан;
• коло - слике се подешава, ако не испуните цијело подручје целе слике.

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

боди {бацкгроунд-репеат: НО- репеат репеат} - слично бацкгроунд-репеат: репеат-и.

У ЦСС3 могу одредити вредности за више слика када листинг параметара, раздвојене зарезима.

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

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

• фонт-кутија - позадина приказује у унутрашњости блока;
• фонт-кутија - слика потпада под оквир;
• Садржај-кутија - слика на позадини ће се појавити у оквиру садржаја.

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

боди {бацкгроунд-цлип: Цонтент & бок;}.

Хром и Сафари захтевају -вебкит- префикс.

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

замућење атрибут омогућава да подесите транспарентност позадине - ЦСС имовина ће радити у свим бровсерима. Вредност се подешава у распону од 0,0 до 1,0 инклузивно. У том случају, можете подесити транспарентност ЦСС позадине Не цео вредност уместо 0,3 је довољно написати .3:

.блоцк {бацкгроунд: урл ( ' имг.пнг); опацити: .3;}.

Да бисте поставили позадинску провидност, ЦСС је погодан и за ИЕ испод деветог верзије, користите атрибут филтер:

.блоцк {бацкгроунд: урл ( ' имг.пнг); филтер: алпха (опацити = 30)}.

У том случају, непрозирност вредност се налази између 0 и 100. Имајте на уму да нетранспарентност атрибут различита подешавања транспарентности путем РГБА наслеђивања: када користите провидност постаје јасно не само позадина, али и сви елементи унутар јединице.

Увек прати статистику коришћења за ЦИС претраживаче и свим другим земљама. Највећи проблем свих ДТП - старије верзије ИЕ, они не дозвољавају да користите у пуној мери ЦСС3. У изгледу не заборавите да користите специјалне услуге које проверили да ли ваш прегледач подржава било какву ЦСС имовину. Ако не можете да инсталирате старије верзије претраживача, наћи сервис који ће провјерити рад сајта на више претраживача на мрежи.