Fons - CSS-triki

Satura rādītājs

backgroundĪpašums CSS ļauj kontrolēt fona jebkura elementa (ko krāsas zem saturu šajā elementā). Tas ir stenogrāfijas rekvizīts, kas nozīmē, ka tas ļauj jums vienā ierakstīt vairākus CSS rekvizītus. Kā šis:

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 sastāv no astoņām citām īpašībām:

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

Jūs varat izmantot jebkuru šo īpašību kombināciju, kas jums patīk, gandrīz jebkurā secībā (lai gan specifikācijā ieteiktā secība ir iepriekš). Tomēr ir gota: viss, ko backgroundīpašumā nenorādāt, tiek automātiski iestatīts uz noklusējumu. Tātad, ja jūs darāt kaut ko līdzīgu šim:

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

Fons būs caurspīdīgs, nevis sarkans. Labojums ir vienkāršs: vienkārši definējiet background-colorpēc backgroundvai vienkārši izmantojiet stenogrammu (piem. background: url(… ) red;)

Vairāki foni

CSS3 pievienoja atbalstu vairākiem foniem, kas slāņojas viens virs otra. Jebkurš rekvizīts, kas saistīts ar foniem, var ietvert ar komatiem atdalītu sarakstu, piemēram:

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

Katra komatatdalītā saraksta vērtība atbilst slānim: pirmā vērtība ir augšējais slānis, otrā vērtība ir otrā un fona krāsa vienmēr ir pēdējā.

Receptes

Skatiet Timothy Miller (@tjacobdesign) Pen emBzRd vietnē CodePen.

Pārlūka atbalsts

Atbalsts atšķiras atkarībā no dažādām īpašajām īpašībām, un katram attiecīgajam Almanac rakstam ir unikālas pārlūka atbalsta piezīmes. Vienkrāsaini pamata foni un atsevišķi attēli darbojas visur, un viss, kas netiek atbalstīts, atgriežas pie nākamās labākās lietas, neatkarīgi no tā, vai tas ir attēls vai krāsa.

Chrome Safari Firefox Opera IE Android iOS
Darbi Darbi Darbi Darbi Darbi Darbi Darbi

Interesanti raksti...