ІнтэрнэтВэб-дызайн

Празрыстасць фону 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), альбо лікавыя (працэнты, пікселі і іншыя адзінкі вымярэння). Пры гэтым неабходна ўказаць два значэння: па гарызанталі і па вертыкалі:

body {background-position: right center;} - у гэтым прыкладзе фон будзе размяшчацца ў левае частцы старонцы, прычым знізу і зверху адлегласці да выявы аднолькавыя.

Атрыбут 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.

У CSS3 магчыма задаць значэння для некалькіх малюнкаў, калі пералічваць параметры праз коску.

Атрыбут 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

 

 

 

 

Newest

Copyright © 2018 be.unansea.com. Theme powered by WordPress.