Taust - CSS-trikid

Lang L: none (table-of-contents)

backgroundVara CSS võimaldab teil kontrollida tausta tahes element (mida värvide all sisu, et element). See on lühike omadus, mis tähendab, et see võimaldab teil kirjutada mitu CSS-i atribuuti ühes. Nagu nii:

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 koosneb kaheksast muust omadusest:

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

Võite kasutada nende omaduste mis tahes kombinatsiooni, mis teile meeldib, peaaegu igas järjekorras (kuigi spetsifikatsioonis soovitatud järjekord on ülal). Siiski on olemas gotcha: kõik, mida te backgroundatribuudis ei määra, määratakse automaatselt selle vaikeseadeks. Nii et kui teete midagi sellist:

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

Taust on punase asemel läbipaistev. Parandamine on siiski lihtne: määrake lihtsalt background-colorpärast backgroundvõi kasutage lihtsalt stenogrammi (nt background: url(… ) red;)

Mitu tausta

CSS3 lisas tuge mitmele taustale, mis kihistuvad üksteise kohal. Iga taustaga seotud atribuut võib võtta komadega eraldatud loendi, näiteks:

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

Iga komaga eraldatud loendis olev väärtus vastab kihile: esimene väärtus on ülemine kiht, teine ​​väärtus on teine ​​ja taustavärv on alati viimane kiht.

Retseptid

Vaadake CodePenilt Timothy Milleri (@tjacobdesign) Pen emBzRd.

Brauseri tugi

Tugi varieerub erinevate spetsiifiliste omaduste vahel ja Almanachi igas vastavas artiklis on ainulaadsed brauseri tugimärked. Põhilised ühevärvilised taustad ja üksikud pildid töötavad siiski kõikjal ja kõik, mida ei toetata, langeb lihtsalt järgmise parema asja juurde, olgu see siis pilt või värv.

Chrome Safari Firefox Ooper IE Android iOS
Töötab Töötab Töötab Töötab Töötab Töötab Töötab

Huvitavad Artiklid...