Taustavärv - CSS-trikid

Lang L: none (table-of-contents)

CSS-i taustavärvi omadus rakendab elemendi taustana ühevärvilisi värve. Siin on näide:

html ( background-color: #82a43a; )

Eespool kasutatud näidet ( #82a43a) nimetatakse kuuskoodiks ja see on üks mitmest viisist, kuidas CSS peab esindama ühte värvi. Õigete heksakoodide leidmiseks on mitmeid viise. Igaüks, kes on kujundustööriista kasutanud, on näinud sellele sarnast värvivalijat:

Pange tähele alumise keskkoha kuuskantkoodi.

Hex-koodid on üks viis CSS-is värvi deklareerimiseks. Samuti on terve hulk nimesid, mida saate kasutada, näiteks:

.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )

Need värvid pole eriti paindlikud, kuid näpistades võivad need kasuks tulla. Neid on lihtsam meelde jätta kui kuuskoode ja neid on tonni.

Teine viis värvi deklareerimiseks on RGB, RGBa, HSL või HSLa kasutamine:

#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )

Erinevalt heksakoodidest võimaldavad need väärtused läbipaistvust (alfa), mis võib olla ülikasulik. Lisateave RGBa või HSLa kohta.

Demo

Vaadake CodePenil CSS-Tricksi pliiatsi taustavärvi (@ css-tricks).

Seotud

  • taust-kinnitus
  • taustklipp
  • taustapilt
  • taust-päritolu
  • taust-positsioon
  • taust-kordus
  • tausta suurus

Rohkem ressursse

  • CSS3 spetsifikatsioon
  • MDN

Brauseri tugi

Hex-koodid ja enamik värvinimesid töötavad kõikjal. RGBa ja HSLa-l on oma brauseritoe komplektid: RGBa ja HSLa.

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

Huvitavad Artiklid...