Kuidas muuta taustavärvi CSS -iga

Kuidas muuta taustavärvi CSS -iga

Üks põnevamaid hetki mis tahes algava kasutajaliidese arendaja karjääris on õppida, kuidas muuta veebilehe taustavärvi.





HTML -iga töötamine on suurepärane ja kõik, kuid vaid mõne rea CSS -iga saate oma lehed ja oma programmeerimisteekonna ellu äratada.



See juhend hõlmab kõike, mida peate teadma, kuidas CSS -iga taustavärvi muuta.





Seadistage

Lööme natuke eeltööd välja.

vaadake filme online ilma registreerimiseta

Märge : Soovitan kasutada Visual Studio kood koos Live Serveri laiendus HTML-i ja CSS-i värskendamisel reaalajas muudatuste vaatamiseks.



  1. Looge oma projekti failidele kaust.
  2. Loo index.html fail HTML -i majutamiseks. Võite kasutada katlaplaadi koodi või lihtsalt mõne seadistada , ja silte.
  3. Loo stiilid.css fail CSS -i jaoks.
  4. Linkige oma CSS -fail HTML -iga, asetades selle sees silte.

Nüüd olete valmis alustama CSS -i redigeerimist.

Seotud: Katlaplaadi veebisaidi loomine



Kuidas muuta taustavärvi CSS -iga

Lihtsaim viis taustavärvi muutmiseks on sihtida keha silt. Seejärel muutke taustavärv vara. Värvikoodid leiate Google'i värvivalija brauserilaiendit otsides ja kasutades

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

See kood muudab tausta kena helesiniseks.



The taustavärv vara aktsepteerib värve kuuel erineval kujul:

  • nimi : helesinine; (ligikaudseks lähendamiseks)
  • kuusnurkne kood : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); kus et on alfa (läbipaistmatus)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); kus et on alfa (läbipaistmatus)

Kasutage kiirkirja taust vara asemel taustavärv lisakoodi lõikamiseks. Selle meetodi abil saate muuta mis tahes HTML -elemendi taustavärvi.

Loo element ja anna sellele klass - antud juhul klass on paneel . Määra selle kõrgus ja laius atribuudid CSS -is. Valige CSS -is element ja värvige ära.

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

Siin näete keha taust vara on kujundatud sõltumatult .paneel taust vara.

Taustaomadused aktsepteerivad ka gradiente:

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

Kuidas CSS -is taustapilti muuta

Mis siis, kui soovite, et taust oleks pilt, mitte ühevärviline või gradient? Kiirkiri taust vara on tuttav sõber.

Veenduge, et pilt oleks teie HTML- ja CSS -failidega samas kaustas. Vastasel juhul peate sulgudes kasutama failiteed, mitte ainult nime:

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

Oh! Tundub, et pilt on liiga sisse suumitud. Selle saate parandada nupuga tausta suurus vara.

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

Kiirkirja kasutamiseks taust kinnisvara koos tausta suurus vara kaas , peate ka täpsustama tausta-asend atribuudid ja eraldage väärtused kaldkriipsuga (isegi kui need on vaikimisi positsiooniväärtused nagu üleval vasakul .)

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

Palun! Õige suurusega taustapilt ühes CSS -i reas.

Loe rohkem: Kuidas CSS -is taustapilti määrata?

Märge : Olge ettevaatlik suurte taustpiltide lisamisega, mis võtavad palju salvestusruumi. Neid võib olla raske laadida mobiilseadmetesse, kus teil on aega kaks sekundit, et anda kasutajatele põhjust lehel püsida.

Uuendage oma CSS-i mängu CSS-i kast-vari abil

Sellise arendaja jaoks nagu sina, on taustavärvi ja taustapildi omadused vana uudis. Õnneks on alati midagi uut õppida.

Proovige oma kastidele CSS box-shadow abil hoogu juurde anda. Teie HTML -elemendid pole kunagi paremini välja näinud!

Jaga Jaga Piiksuma E -post CSS-i kast-vari kasutamine: 13 nippi ja näidet

Mahedad karbid tunduvad igavad. Kuuse neid CSS-i kasti-varju efektiga!

Loe edasi Seotud teemad
  • Programmeerimine
  • Veebiarendus
  • Veebidisain
  • CSS
Autori kohta Marcus Mears III(Avaldatud 26 artiklit)

Marcus on eluaegne tehnoloogiahuviline ja MUO kirjanikutoimetaja. Ta alustas oma vabakutselise kirjutamiskarjääri aastal 2020, hõlmates populaarseid tehnoloogiaid, vidinaid, rakendusi ja tarkvara. Ta õppis kolledžis arvutiteadust, keskendudes esiotsa veebiarendusele.

Veel Marcus Mearsist III

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin