Kā nomainīt fona krāsu, izmantojot CSS

Kā nomainīt fona krāsu, izmantojot CSS

Viens no aizraujošākajiem brīžiem jebkurā topošā front-end izstrādātāja karjerā ir iemācīties mainīt tīmekļa lapas fona krāsu.





Darbs ar HTML ir lielisks un viss, taču tikai ar dažām CSS rindām jūs varat padarīt savas lapas un savu programmēšanas ceļojumu dzīvu.



Šī rokasgrāmata aptvers visu, kas jums jāzina, kā mainīt fona krāsu, izmantojot CSS.





Sagatavojieties

Izsitīsim nelielu priekšdarbu.

failu pārlūka tumšais režīms nedarbojas

Piezīme : Iesaku lietot Visual Studio kods Ar Live Server paplašinājums lai reāllaikā skatītu izmaiņas, atjauninot HTML un CSS.



  1. Izveidojiet mapi sava projekta failiem.
  2. Izveidojiet index.html failu, kurā atrodas jūsu HTML. Varat izmantot katla plāksnes kodu vai vienkārši iestatīt dažus , , un tagus.
  3. Izveidojiet a stili.css failu jūsu CSS.
  4. Saistiet savu CSS failu ar HTML, ievietojot iekšpusē tagus.

Tagad esat gatavs sākt CSS rediģēšanu.

Saistīts: Kā izveidot vietni Boilerplate



Kā nomainīt fona krāsu, izmantojot CSS

Vienkāršākais veids, kā mainīt fona krāsu, ir mērķauditorijas atlase ķermenis tagu. Pēc tam rediģējiet fona krāsa īpašums. Krāsu kodus varat atrast, meklējot un izmantojot Google krāsu atlasītāja paplašinājumu

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

Šis kods maina fonu uz jauku gaiši zilu.



The fona krāsa īpašums pieņem krāsas sešās dažādās formās:

  • vārds : gaiši zils; (tuvam tuvinājumam)
  • hex kods : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); kur uz ir alfa (necaurredzamība)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); kur uz ir alfa (necaurredzamība)

Izmantojiet stenogrammu fons vietā īpašums fona krāsa lai samazinātu papildu kodu. Izmantojot šo metodi, varat mainīt jebkura HTML elementa fona krāsu.

Izveidojiet a elementu un piešķir tai klasi - šajā gadījumā klase ir panelis . Iestatiet to augstums un platums rekvizītus CSS. Atlasiet elementu CSS un noņemiet krāsu.

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;
}

Šeit jūs varat redzēt ķermenis fons īpašums ir veidots neatkarīgi no .panelis fons īpašums.

Fona īpašums pieņem arī gradientus:

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

Kā mainīt fona attēlu CSS

Ko darīt, ja vēlaties, lai fons būtu attēls, nevis vienkrāsains vai gradients? Īsumā fons īpašums ir pazīstams draugs.

Pārliecinieties, vai attēls atrodas tajā pašā mapē kā jūsu HTML un CSS faili. Pretējā gadījumā jums būs jāizmanto faila ceļš iekavās, nevis tikai nosaukums:

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

Oho! Šķiet, ka attēls ir pārāk tuvināts. To var novērst, izmantojot fona izmērs īpašums.

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

Lai izmantotu stenogrammu fons īpašums kopā ar fona izmērs īpašums piesegt , jums arī jānorāda fona stāvoklis īpašības un atdaliet vērtības ar slīpsvītru (pat ja tās ir noklusējuma pozīcijas vērtības, piemēram, augšējais kreisais .)

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

Lūdzu! Pareiza izmēra fona attēls vienā CSS rindā.

Lasīt vairāk: Kā iestatīt fona attēlu CSS

Piezīme : Esiet piesardzīgs, iekļaujot lielus fona attēlus, kas aizņem daudz vietas. Tos var būt grūti ielādēt mobilajās ierīcēs, kur jums ir visas divas sekundes, lai sniegtu lietotājiem iemeslu palikt lapā.

Uzlabojiet savu CSS spēli ar CSS lodziņu ēnu

Izstrādātājam, piemēram, jums, fona krāsas un fona attēla īpašības ir vecas ziņas. Par laimi, vienmēr ir ko iemācīties.

Mēģiniet uzlabot savas kastes, izmantojot CSS box-shadow. Jūsu HTML elementi nekad nav izskatījušies labāk!

Kopīgot Kopīgot Čivināt E -pasts Kā izmantot CSS box-shadow: 13 triki un piemēri

Mīkstās kastes izskatās garlaicīgi. Ieprieciniet tos ar CSS kastes-ēnas efektu!

Lasīt Tālāk Saistītās tēmas
  • Programmēšana
  • Web izstrāde
  • Web dizains
  • CSS
Par autoru Markuss Mearss III(Publicēti 26 raksti)

Markuss ir mūža tehnoloģiju entuziasts un MUO rakstnieks. Viņš uzsāka savu ārštata rakstnieka karjeru 2020. gadā, aptverot populāras tehnoloģijas, sīkrīkus, lietotnes un programmatūru. Viņš studēja datorzinātnes koledžā, koncentrējoties uz tīmekļa vietnes izstrādi.

Vairāk no Markusa Mearsa III

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu