Paano baguhin ang Kulay ng Background Sa CSS

Paano baguhin ang Kulay ng Background Sa CSS

Ang isa sa mga pinaka kapanapanabik na sandali sa anumang namumuko na karera ng developer ng front-end ay ang pag-alam kung paano baguhin ang kulay ng background ng isang web page.





Ang pagtatrabaho sa HTML ay mahusay at lahat, ngunit sa ilang mga linya lamang ng CSS maaari mong gawin ang iyong mga pahina, at ang iyong paglalakbay sa programa, mamumulaklak sa buhay.





Saklaw ng gabay na ito ang lahat ng kailangan mong malaman sa kung paano baguhin ang kulay ng background sa CSS.





Mag-set up

Patumbahin natin ang isang maliit na paunang gawain.

bakit hindi gumagana ang aking roku remote

Tandaan : Inirerekumenda ko ang paggamit Code ng Visual Studio kasama ang Live extension ng Server upang matingnan ang mga pagbabago sa real-time habang ina-update mo ang HTML at CSS.



  1. Lumikha ng isang folder para sa mga file ng iyong proyekto.
  2. Lumikha ng isang index.html file sa bahay ng iyong HTML. Maaari kang gumamit ng boilerplate code, o mag-set up lamang ng ilan , , at mga tag
  3. Gumawa ng mga istilo.css file para sa iyong CSS.
  4. I-link ang iyong CSS file sa HTML sa pamamagitan ng paglalagay sa loob ng mga tag

Handa ka na ngayong magsimula sa pag-edit ng CSS.

Kaugnay: Paano Lumikha ng isang Website ng Boilerplate





Paano baguhin ang Kulay ng Background Sa CSS

Ang pinakasimpleng paraan upang baguhin ang kulay ng background ay sa pamamagitan ng pag-target sa katawan tag Pagkatapos, i-edit ang kulay ng background pag-aari Maaari kang makahanap ng mga color code sa pamamagitan ng paghahanap at paggamit ng extension ng browser ng Google Color Picker

body {
background-color: rgb(191, 214, 255);
}

Binabago ng code na ito ang background sa isang magandang light blue.





Ang kulay ng background tinatanggap ng pag-aari ang mga kulay sa anim na magkakaibang anyo:

  • pangalan : lightskyblue; (para sa isang malapit na approximation)
  • hex code : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); kung saan sa ay alpha (opacity)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); kung saan sa ay alpha (opacity)

Gamitin ang shorthand background ari-arian kapalit ng kulay ng background upang i-cut dagdag na code. Maaari mong baguhin ang kulay ng background ng anumang elemento ng HTML gamit ang pamamaraang ito.

Gumawa ng elemento at bigyan ito ng isang klase — sa kasong ito, ang klase ay panel . Itakda ang taas at lapad mga katangian sa CSS. Piliin ang elemento sa CSS at kulayan ang kulay.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

Dito mo makikita ang katawan background pag-aari ay naka-istilo nang nakapag-iisa ng .panel background pag-aari

Tumatanggap din ang background ng pag-aari ng gradients:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

Paano baguhin ang Larawan sa Background sa CSS

Paano kung nais mo ang background na maging isang imahe sa halip na isang solidong kulay o gradient? Ang maikling salita background pamilyar na kaibigan ang pag-aari

Tiyaking ang imahe ay nasa parehong folder tulad ng iyong mga HTML at CSS file. Kung hindi man kakailanganin mong gamitin ang file path sa loob ng panaklong kaysa sa pangalan lamang:

body {
background: url(leaves-and-trees.jpg)
}

Whoah! Mukhang ang imahe ay masyadong naka-zoom in. Maaari mong ayusin iyon sa sukat ng background pag-aari

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

Upang magamit ang shorthand background ari-arian kasabay ng sukat ng background pag-aari takip , dapat mo ring tukuyin background-posisyon mga pag-aari at paghiwalayin ang mga halaga sa isang backslash (kahit na ang mga ito ay default na mga posisyonal na halaga tulad ng tuktok sa kaliwa .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Ayan na! Isang maayos na laki ng imahe ng background sa isang linya ng CSS.

Magbasa Nang Higit Pa: Paano Magtakda ng isang Imahe sa Background sa CSS

Tandaan : Mag-ingat sa pagsasama ng malalaking mga imahe sa background na tumatagal ng maraming espasyo sa imbakan. Maaari itong maging matigas upang mai-load sa mobile, kung saan mayroon kang lahat ng dalawang segundo upang bigyan ang mga gumagamit ng isang dahilan na manatili sa pahina.

Itaas ang Iyong CSS Game Sa CSS box-shadow

Para sa isang developer tulad ng iyong sarili, ang mga background-color at background-image na mga katangian ay dating balita. Sa kabutihang palad, palaging may bagong natututunan.

Subukang bigyan ang iyong mga kahon ng tulong sa CSS box-shadow. Ang iyong mga elemento ng HTML ay hindi kailanman tumingin mas mahusay!

Magbahagi Magbahagi Mag-tweet Email Paano Gumamit ng CSS box-shadow: 13 Mga Trick at Halimbawa

Ang mga kahon ng bland ay mukhang mayamot. Pabilisin ang mga ito gamit ang CSS box-shadow effect!

Basahin Susunod
Mga Kaugnay na Paksa
  • Programming
  • Pag-unlad sa Web
  • Disenyo ng web
  • CSS
Tungkol sa May-akda Marcus Mears III(26 Mga Artikulo Nai-publish)

Si Marcus ay isang buong buhay na mahilig sa teknolohiya at Manunulat ng Manunulat sa MUO. Nagsimula siya sa kanyang freelance career sa pagsulat noong 2020, na sumasaklaw sa nagte-trend na tech, gadget, apps, at software. Nag-aral siya ng Computer Science sa kolehiyo na may pagtuon sa front-end web development.

Higit pa Mula kay Marcus Mears III

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe