Kaip pakeisti fono spalvą naudojant CSS

Kaip pakeisti fono spalvą naudojant CSS

Vienas iš įdomiausių momentų bet kokioje pradedančio vartotojo sąsajos kūrėjo karjeroje yra išmokti pakeisti tinklalapio fono spalvą.





Dirbti su HTML yra puiku ir viskas, tačiau vos su keliomis CSS eilutėmis galite priversti savo puslapius ir savo programavimo kelionę pražysti.



Šis vadovas apims viską, ką reikia žinoti, kaip pakeisti fono spalvą naudojant CSS.





Nustatykite

Pabandykime šiek tiek parengiamojo darbo.

pranešimų programa neveikia „Mac“

Pastaba : Rekomenduoju naudoti „Visual Studio“ kodas su „Live Server“ plėtinys peržiūrėti pokyčius realiuoju laiku, kai atnaujinate HTML ir CSS.



  1. Sukurkite savo projekto failų aplanką.
  2. Sukurkite index.html failą, kuriame yra jūsų HTML. Galite naudoti katilo plokštės kodą arba tiesiog jį nustatyti , , ir žymes.
  3. Sukurti stilius.css failą savo CSS.
  4. Susiekite savo CSS failą su HTML pateikdami viduje žymes.

Dabar esate pasiruošę pradėti redaguoti CSS.

Susijęs: Kaip sukurti „Boilerplate“ svetainę



Kaip pakeisti fono spalvą naudojant CSS

Paprasčiausias būdas pakeisti fono spalvą yra nukreipti į kūnas žyma. Tada redaguokite fono spalva nuosavybė. Spalvų kodus galite rasti ieškodami ir naudodami „Google Color Picker“ naršyklės plėtinį

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

Šis kodas pakeičia foną į gražią šviesiai mėlyną.



The fono spalva turtas priima spalvas šešiomis skirtingomis formomis:

  • vardas : šviesiai mėlyna; (norint gauti apytikslį vaizdą)
  • šešioliktainis kodas : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); kur į yra alfa (neskaidrumas)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); kur į yra alfa (neskaidrumas)

Naudokite santrumpą fone turtas vietoje fono spalva norint iškirpti papildomą kodą. Šiuo metodu galite pakeisti bet kurio HTML elemento fono spalvą.

Sukurti elementą ir suteikite jam klasę - šiuo atveju klasė yra skydelis . Nustatykite jo aukščio ir pločio ypatybės CSS. Pasirinkite elementą CSS ir pašalinkite spalvą.

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

Čia galite pamatyti kūnas fone nuosavybė sukurta nepriklausomai nuo .panelis fone nuosavybė.

Fono ypatybė taip pat priima gradientus:

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

Kaip pakeisti fono paveikslėlį CSS

Ką daryti, jei norite, kad fonas būtų vaizdas, o ne vientisa spalva ar gradientas? Santrumpa fone turtas yra pažįstamas draugas.

Įsitikinkite, kad vaizdas yra tame pačiame aplanke kaip jūsų HTML ir CSS failai. Priešingu atveju turėsite naudoti failo kelią skliausteliuose, o ne tik pavadinimą:

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

Oho! Atrodo, kad vaizdas yra per daug padidintas. Tai galite išspręsti naudodami fono dydžio nuosavybė.

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

Norėdami naudoti santrumpą fone nuosavybė kartu su fono dydžio nuosavybė viršelis , taip pat turite nurodyti fono padėtis ypatybes ir atskirkite reikšmes pasviruoju brūkšniu (net jei jos yra numatytosios padėties vertės, tokios kaip viršuje kairėje .)

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

Štai taip! Tinkamo dydžio fono vaizdas vienoje CSS eilutėje.

Skaityti daugiau: Kaip nustatyti fono paveikslėlį CSS

Pastaba : Būkite atsargūs įtraukdami didelius fono paveikslėlius, kurie užima daug vietos. Tai gali būti sunku įkelti į mobilųjį telefoną, kur jūs turite dvi sekundes, kad suteiktumėte vartotojams priežastį likti puslapyje.

Padidinkite savo CSS žaidimą naudodami CSS langelio šešėlį

Tokiam kūrėjui kaip jūs, fono spalvos ir fono paveikslėlio savybės yra sena naujiena. Laimei, visada yra ko išmokti.

Pabandykite sustiprinti savo dėžutes naudodami CSS dėžutės šešėlį. Jūsų HTML elementai niekada neatrodė geriau!

Dalintis Dalintis „Tweet“ Paštu Kaip naudoti „CSS box-shadow“: 13 gudrybių ir pavyzdžių

Švelnios dėžutės atrodo nuobodžiai. Puoškite juos CSS dėžutės šešėlio efektu!

Skaityti toliau Susijusios temos
  • Programavimas
  • Interneto svetainių kūrimas
  • Interneto svetainės dizainas
  • CSS
Apie autorių Marcusas Mearsas III(Paskelbti 26 straipsniai)

Marcusas yra visą gyvenimą trunkantis technologijų entuziastas ir rašytojas MUO. Jis pradėjo savo laisvai samdomo rašytojo karjerą 2020 m., Apimdamas populiarias technologijas, programėles, programas ir programinę įrangą. Kolegijoje jis studijavo informatiką, daugiausia dėmesio skirdamas internetinės svetainės kūrimui.

Daugiau iš Marcus Mears III

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia