Fonas - CSS-gudrybės | CSS almanachas 2025

backgroundCSS nuosavybė leidžia kontroliuoti bet kurio elemento fonas (kas Dažai po į šio elemento kiekį). Tai yra sutrumpinta ypatybė, o tai reiškia, kad ji leidžia jums parašyti, kokios būtų kelios CSS ypatybės viename. Kaip šitas:

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 sudaro dar aštuonios savybės:

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

Galite naudoti bet kurį šių savybių derinį, kuris jums patinka, beveik bet kokia tvarka (nors specifikacijose rekomenduojama tvarka yra aukščiau). Vis dėlto yra gauja: viskas, ko nenurodote backgroundnuosavybėje, automatiškai nustatoma pagal numatytuosius nustatymus. Taigi, jei darote kažką tokio:

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

Fonas bus skaidrus, o ne raudonas. Vis dėlto taisymas yra lengvas: tiesiog apibrėžkite background-colorpo backgroundarba tiesiog naudokite stenografiją (pvz. background: url(… ) red;)

Keli fonai

CSS3 papildė kelis fonus, kurie sluoksniuojasi vienas virš kito. Bet kuri nuosavybė, susijusi su fonais, gali būti kableliais atskirtas sąrašas, pavyzdžiui:

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

Kiekviena kableliais atskirtų sąrašų reikšmė atitinka sluoksnį: pirmoji reikšmė yra viršutinis, antroji - antrasis, o fono spalva visada yra paskutinė.

Receptai

Žiūrėkite Timothy Millerio (@tjacobdesign) „Pen emBzRd“, esantį „CodePen“.

Naršyklės palaikymas

Palaikymas skiriasi priklausomai nuo skirtingų specifinių savybių, o kiekviename atitinkamame „Almanach“ straipsnyje yra unikalios naršyklės palaikymo pastabos. Vis dėlto pagrindiniai vienspalviai fonai ir pavieniai vaizdai veikia visur, o viskas, kas nepalaikoma, grįžta į kitą geriausią dalyką, nesvarbu, ar tai vaizdas, ar spalva.