Бацкгроунд - ЦСС-трикови

Anonim

backgroundИмовина у ЦСС-у вам омогућава да контролишете позадину било ког елемента (шта боје испод садржаја у том елементу). То је скраћено својство, што значи да вам омогућава да напишете шта би било више ЦСС својстава у једно. Овако:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background састоји се од још осам својстава:

  • background-image
  • background-position
  • background-size
  • background-repeat
  • background-attachment
  • background-origin
  • background-clip
  • background-color

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

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Позадина ће бити провидна, уместо црвена. Ипак је поправак лак: само дефинишите background-colorнакон backgroundили једноставно користите скраћеницу (нпр. background: url(… ) red;)

Више позадина

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

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Свака вредност на листи одвојеној зарезима одговара слоју: прва вредност је горњи слој, друга вредност је други слој, а боја позадине је увек последњи слој.

Рецепти

Погледајте оловку емБзРд Тимотхи Миллер-а (@тјацобдесигн) на ЦодеПен-у.

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

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

Хром Сафари Фирефок Опера ИЕ Андроид иОС
Извођење радова Извођење радова Извођење радова Извођење радова Извођење радова Извођење радова Извођење радова