Позадина-слика - ЦСС-трикови

Anonim

background-imageИмовина у ЦСС примењује графику (нпр ПНГ СВГ ЈПГ, ГИФ, вебп) или нагиб у позадину елемента.

Постоје две различите врсте слика које можете укључити у ЦСС: редовне слике и преливи.

Слике

Коришћење слике на позадини је прилично једноставно:

body ( background: url(sweettexture.jpg.webp); )

url()Вредност омогућава да обезбеде пут датотеку на било коју слику, и она ће се појавити као позадина за тај елемент.

Такође можете поставити УРИ података за url(). То изгледа овако:

body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )

Ова техника уклања један ХТТП захтев, што је добра ствар. Али, постоји низ недостатака, па пре него што започнете замену свих слика, уверите се да сте узели у обзир све предности и недостатке УРИ-ја података.

Такође можете користити background-imageза приказивање слика, што је још један користан метод за смањење ХТТП захтева.

Градијенти

Друга опција када користите позадину је да кажете прегледачу да креира градијент. Ево супер-супер једноставног примера линеарног градијента:

body ( background: linear-gradient(black, white); )

Такође можете користити радијалне градијенте:

body ( background: radial-gradient(circle, black, white); )

Технички гледано, градијенти су само још један облик слике у позадини. Разлика је у томе што прегледач прави слику за вас. Ево како их написати: ЦСС3 синтакса градијента

Горњи пример користи само један градијент, али такође можете слојити више градијената један изнад другог. Постоји неколико прилично невероватних образаца које можете створити помоћу ове технике.

Постављање резервне боје

Ако се слика позадине не успе учитати или се ваша позадина градијента гледа у прегледачу који не подржава градијенте, прегледач ће тражити боју позадине као резервну. Резервну боју можете одредити овако:

body ( background: url(sweettexture.jpg.webp) blue; )

Више слика у позадини

За позадину можете користити више слика или мешавину слика и градијената. Више слика у позадини је сада добро подржано (сви модерни претраживачи и ИЕ9 ​​+ за графичке слике, ИЕ10 + за прелазе).

Када користите више позадинских слика, имајте на уму да постоји донекле контра-интуитиван редослед слагања. Наведи слику која би требало да буде испред, а последња са задње стране, овако:

body ( background: url(logo.png.webp), url(background-pattern.png.webp); )

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

body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )

Не можете ограничити колико слика у позадини можете да подесите, а можете и цоол ствари попут анимирања слика у позадини. На блогу Давида Валсха постоји добар пример више позадинских слика са анимацијом.

Демо

Погледајте позадинску слику оловке од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Повезан

  • позадина-прилог
  • позадина-исечак
  • боја позадине
  • позадина-порекло
  • позадина-положај
  • позадина-понављање
  • величина позадине

Више ресурса

  • Спецификације ЦСС3
  • МДН
  • Савршене позадинске слике на целој страници
  • Овладавање ЦСС градијентима (Слидедецк)

Подршка прегледача

Редовне слике раде свуда, а више слика ради у модерним прегледачима и ИЕ9 ​​+. Ево подршке за градијенте:

Хром Сафари Фирефок Опера ИЕ Андроид иОС
10+ 5.1+ 3.6+ 12.1+ 10+ 4+ 5.1+