Інтэрнэт, Вэб-дызайн
Празрыстасць фону CSS. Празрысты фон або тэкст з дапамогай CSS
З прыходам CSS3 праца вярстальшчыкі шмат у чым стала прасцей і лагічней: бо зараз можна сапраўды гнутка наладзіць які-небудзь аб'ект, усё радзей звяртаючыся да JavaScript. Дапусцім, вам трэба наладзіць празрыстасць фону - CSS тут жа прапаноўвае некалькі варыянтаў.
Фон задаецца наборам атрыбутаў (background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color), прычым кожны з іх можна прапісаць асобна ці ж аб'яднаць пад атрыбутам background. Разбяром кожны з іх падрабязней.
Атрыбут background-color
У CSS колер фону можна задаць некалькімі спосабамі: з дапамогай шаснаццатковай кода, назвы колеру або RGB-запісы. У CSS3 стала магчыма выкарыстоўваць замест RGB-запісы варыянт з RGBA.
Шаснаццатковы код колеру запісваецца ва ўласцівасці пасля кратаў: background-color: # FFDAB9. Калі ж знакі ў такой запісу парамі супадаюць, код звычайна трохі скарачаюць: # ccff00 можна запісаць як # cf0:
body {background-color: # cf0;}.
Назва ёсць нават у самых экзатычных кветак. Напрыклад, акрамя стандартных red і white вы можаце выкарыстоўваць NavajoWhite (#FFDEAD) або Honeydew2 (# E0EEE0):
body {background-color: purple;}.
Апошні варыянт RGB або RGBA запісу дазваляе задаваць не толькі колер, але і празрыстасць фону CSS, аднак спосаб працуе ў IE толькі старэйшыя за 9 версіі. Астатнія браўзэры нармальна распазнаюць варыянт з празрыстасцю. Па стандартах W3C пераважна выкарыстоўваць усё ж такі RGBA замест больш звыклага RGB.
Апошняе значэнне ў RGBA і задае непразрыстасць фону ад 0 (празрысты) да 1 (непразрысты).
Ёсць яшчэ некаторыя незвычайныя значэння. Колер фону можна задаць з дапамогай HSL і HSLA. Абодва былі дададзены ў CSS3, а таму не падтрымліваюцца IE ніжэй за 9 версіі. Варыянты ідэнтычныя RGB або RGBA, толькі ў іншым фармаце: Hue (адценне - значэнне на каляровым крузе, задаецца ў градусах), Saturate (насычанасць - інтэнсіўнасць колеру ў працэнтах, ад 0 да 100), Lightness (светлата - яркасць, вымяраецца аналагічна параметры Saturate ).
Атрыбут background-image
Найбольш крос-браузерный варыянт празрыстага фону - гэта выкарыстання выявы. У CSS3 можна задаць нават некалькі малюнкаў, робіцца гэта праз коску. прыклад:
body {background-image: url (bg1.png), url (bg2.png)}.
Такі спосаб падтрымлівае нават IE8. Некалькі малюнкаў у якасці фону выкарыстоўваюцца пры гумавай вёрстцы. Галоўнае, не забывайце пры выкарыстанні любога малюнка таксама задаваць у CSS колер фону, так як у карыстальнікаў можа проста не загрузіцца карцінка.
Атрыбут background-position
Калі вы выкарыстоўваеце малюнак, каб задаць фон блока, CSS дазволіць вам размясціць карцінку ў любым месцы экрана. Па змаўчанні малюнак размяшчаецца ў левым верхнім куце. Атрыбут прымае альбо славесныя ўказанні (top, bottom, left, right), альбо лікавыя (працэнты, пікселі і іншыя адзінкі вымярэння). Пры гэтым неабходна ўказаць два значэння: па гарызанталі і па вертыкалі:
Атрыбут background-size
Часам патрабуецца з дапамогай CSS расцягнуць фон або паменшыць яго памер. Для гэтага выкарыстоўваюць атрыбут background-size, прычым памер фону можна задаць як у пікселях або працэнтах, так і ў любых іншых адзінках вымярэння.
З гэтым атрыбутам ёсць некаторыя праблемы: для карэктнага адлюстравання фону ў ранніх версіях браўзэраў неабходна выкарыстоўваць прэфіксы. Вядома, актуальныя версіі цалкам падтрымліваюць гэты атрыбут і неабходнасць у спецыфічных уласцівасцях адпала.
Атрыбут background-attachment
Гэты атрыбут задае паводзіны фонавага малюнка пры прагортцы. Так, ён можа прымаць 3 значэння (не ўлічваючы inherit, агульнага для ўсіх прадстаўленых у гэтым артыкуле атрыбутаў):
- fixed - робіць карцінку на фоне нерухомай;
- scroll - фон пракручваецца разам з астатнімі элементамі;
- local - малюнак на фоне пракручваецца, калі прагортку мае змесціва. Фон, які выходзіць за рамкі змесціва, фіксуецца.
Прыклад выкарыстання:
body {background-attachment fixed}.
У цяперашні час Firefox не падтрымлівае апошняе ўласцівасць (local).
Атрыбут background-origin
Гэты атрыбут адказвае за пазіцыянаванне элемента. Браўзэры ранніх версій патрабуюць выкарыстання прэфіксаў. Само ўласцівасць мае тры параметру:
- padding-box пазіцыянуе фон адносна краю, пры гэтым улічваючы таўшчыню рамкі;
- border-box адрозніваецца ад папярэдняга ўласцівасці тым, што лінія мяжы можа цалкам або часткова перакрываць фон;
- content-box пазіцыянуе малюнак, прявязывая яго да кантэнту.
Калі зададзена некалькі значэнняў, то браўзэры могуць рэагаваць па-свойму: Firefox і Opera ўспрымаюць толькі першы варыянт.
Атрыбут background-repeat
Як правіла, калі фон зададзены малюнкам, ён павінен паўтарацца па гарызанталі ці вертыкалі. Для гэтага і выкарыстоўваецца атрыбут background-repeat. Так, фон блока, CSS якога змяшчае такое ўласцівасць, можа мець адзін з некалькіх параметраў:
- no-repeat - выява з'яўляецца на старонцы ў адзіным варыянце;
- repeat - фон паўтараецца па восях x і y;
- repeat-x - толькі па гарызанталі;
- repeat-y - толькі па вертыкалі;
- space - фон паўтараецца, але калі прастора запоўніць не атрымліваецца, то паміж малюнкамі з'яўляюцца пустэчы;
- round - выява маштабуецца, калі не атрымліваецца ўсю вобласць запоўніць цэлымі малюначкамі.
Прыклад выкарыстання атрыбуту:
body {background-repeat: no-repeat repeat} - аналагічна background-repeat: repeat-y.
Атрыбут background-clip
Гэты атрыбут вызначае паводзіны фону пад межамі (напрыклад, у выпадку пункцірнай рамак):
- padding-box - фон адлюстроўваецца строга ўнутры блока;
- border-box - выява заходзіць пад рамкі;
- content-box - карцінка на фоне з'яўляецца толькі ўнутры змесціва.
Прыклад выкарыстання:
body {background-clip: content-box;}.
Chrom і Safari патрабуюць выкарыстання прэфікса -webkit-.
Атрыбуты opacity і filter
Атрыбут opacity дазваляе задаць празрыстасць фону - CSS ўласцівасць будзе працаваць ва ўсіх браўзэрах. Значэнне усталёўваецца ў межах ад 0.0 да 1.0 ўключна. Пры гэтым вы можаце ўсталяваць празрыстасць фону CSS без цэлага значэння: замест 0.3 дастаткова напісаць .3:
.block {background-image: url (img.png); opacity: .3;}.
Каб задаць празрыстасць фону, CSS якога падыдзе нават для IE ніжэй дзявятай версіі, выкарыстоўвайце атрыбут filter:
.block {background-image: url (img.png); filter: alpha (opacity = 30);}.
У гэтым выпадку значэнне opacity усталёўваецца ў межах ад 0 да 100. Улічыце, што атрыбут opacity адрозніваецца ад налады празрыстасці з дапамогай RGBA спадчыннасцю: пры выкарыстанні opacity празрыстым становіцца не толькі фон, але і ўсе элементы ўнутры блока.
Заўсёды сочыце за статыстыкай выкарыстання браўзэраў па СНД і ўсім астатнім краінам. Самая вялікая праблема ўсіх вярстальшчыкі - старыя версіі IE, менавіта яны не дазваляюць выкарыстоўваць у поўнай меры CSS3. Пры вёрстцы не забывайце карыстацца адмысловымі сэрвісамі, якія правяраюць, ці падтрымлівае ваш браўзэр якое-небудзь ўласцівасць CSS. Калі вы не можаце ўсталяваць старыя версіі браўзэраў, знайдзіце сэрвіс, які праверыць працу сайта ў розных браўзэрах анлайн.
Similar articles
Trending Now