Paano Magtakda ng isang Imahe sa Background sa CSS

Paano Magtakda ng isang Imahe sa Background sa CSS

Ang paglikha ng isang website ay isang mahusay na paraan upang maipahayag ang iyong sarili. Bagaman maraming mga tool sa pagbuo ng website, ang pagsulat mismo sa iyo ay isang nakakatuwang paraan upang malaman ang higit pa tungkol sa kung paano gumagana ang mga website sa likod ng mga eksena. Ang isang magandang proyekto ng nagsisimula ay upang lumikha ng isang website at magdagdag ng isang imahe sa background na may CSS. Tatakbo at tatakbo ang proyektong ito kasama ang parehong HTML at CSS.





Ano ang CSS?

Ang CSS ay nangangahulugang Cascading Style Sheet. Ito ay isang programa ng wika na nagbibigay-daan sa iyo upang mai-istilo ang mga wika ng markup. Ang isang tulad ng wikang markup ay ang HTML o Hyper-Text Markup na Wika. Ginagamit ang HTML upang lumikha ng mga website. Bagaman maaari mong makontrol ang ilan sa istilo ng website gamit ang HTML, nag-aalok ang CSS ng higit pang pagpipiliang kontrol at disenyo.



Lumilikha ng isang Pangunahing Website Na May HTML

Dahil ang CSS ay isang istilong wika lamang, upang magamit ito, kailangan muna namin ng isang bagay na mai-istilo. Ang isang napaka pangunahing website ay magiging sapat para sa amin upang magsimulang maglaro sa CSS. Ipapakita ng aming pahina ang 'Hello World.'









Hello World



Kung sakaling hindi ka pamilyar sa HTML, mabilis nating tingnan kung ano ang ginagawa ng lahat ng mga elemento. Tulad ng nabanggit, ang HTML ay isang markup na wika, na nangangahulugang gumagamit ito ng mga tag upang markahan kung ano ang teksto. Kailan man makakita ka ng salitang napapaligiran ito ay isang tag. Mayroong dalawang uri ng mga tag, isang tag na nagmamarka sa simula ng isang seksyon na gumagamit at isa na nagmamarka sa pagtatapos ng isang seksyon na gumagamit. Ang teksto sa loob ng isang seksyon ay inilaan din upang gawing mas madaling makita ang pagkakaiba na ito.



Sa aming halimbawa, mayroon kaming apat na mga tag. Ang html ipinapahiwatig ng tag kung aling mga elemento ang bahagi ng website. Ang ulo naglalaman ang tag ng impormasyon ng header na hindi ipinakita sa pahina ngunit kinakailangan upang likhain ang pahina. Ang lahat ng ipinakitang elemento ay nasa pagitan ng katawan mga tag Mayroon lamang kaming isang ipinakitang elemento, ang p tag Sinasabi nito sa web browser na ang teksto ay isang talata.

Kaugnay: 10 Mga Simpleng Halimbawa ng CSS Code na Maaari Mong Malaman sa loob ng 10 Minuto



Pagdaragdag ng CSS sa HTML

Ngayon na mayroon kaming isang simpleng pahina, maaari naming ipasadya ang estilo sa CSS. Ang aming pahina ay medyo simple ngayon, at walang gaanong magagawa natin, ngunit magsimula tayo sa pamamagitan ng pagpapakita ng aming talata upang makilala natin ito mula sa background sa pamamagitan ng pagdaragdag ng isang hangganan.





Hello World






Ngayon, ang aming talata ay mapapalibutan ng isang itim na hangganan. Ang pagdaragdag ng isang paglalarawan ng estilo sa CSS sa aming tag ng talata ay nagsabi sa website kung paano i-istilo ang talata. Maaari kaming magdagdag ng higit pang mga paglalarawan. Taasan natin ang puting-puwang, o padding, sa paligid ng ating talata at isentro ang ating teksto.





Hello World




Mas maganda ang hitsura ng aming website, ngunit ang aming HTML ay nagsisimulang magulo sa lahat ng mga paglalarawan na iyon sa tag ng talata. Maaari naming ilipat ang impormasyong ito sa aming header. Ang aming header ay para sa impormasyon na kailangan namin upang maipakita nang tama ang website.




p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}



Hello World



Ngayon ang aming HTML ay mas madaling basahin. Mapapansin mo na kailangan nating baguhin ang ilang mga bagay sa paligid. Sinasabi ng style tag ang impormasyon sa istilo ng web browser, ngunit kung ano din ang dapat i-istilo. Sa aming halimbawa, gumamit kami ng dalawang magkakaibang paraan upang sabihin dito kung ano ang dapat i-istilo. Ang p sa tag ng estilo ay sinasabi sa web browser na ilapat ang istilong iyon sa lahat ng mga tag ng talata. Ang #ourParagraph Sinasabi ito ng seksyon na ang mga elemento lamang ng istilo kasama ang id amingParagraph . Pansinin mo yan id ang impormasyon ay naidagdag sa p tag sa aming katawan.

kung paano mag-ss isang chat nang hindi nila alam

Pag-import ng isang CSS File sa Iyong Website

Ang pagdaragdag ng impormasyon ng estilo sa header ay ginagawang mas madaling basahin ang aming code. Gayunpaman, kung nais naming estilo ang maraming iba't ibang mga pahina sa parehong paraan, kailangan naming idagdag ang teksto sa tuktok ng bawat pahina. Maaaring hindi ito gaanong trabaho, maaari mo itong kopyahin at lampasan pagkatapos ng lahat, ngunit lumilikha ito ng maraming trabaho kung nais mong baguhin ang isang elemento sa paglaon.

Sa halip, itatago namin ang impormasyong CSS sa isang hiwalay na file at mai-import ang file upang i-istilo ang pahina. Kopyahin at i-paste ang impormasyon sa pagitan ng mga style tag sa isang bagong CSS file amingCSSfile.css .

p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

Pagkatapos, i-import ang file sa HTML file.






Hello World



Pagdaragdag ng isang Imahe sa Background Sa CSS

Ngayon na mayroon kang isang matatag na batayan sa HTML at CSS, ang pagdaragdag ng isang imahe sa background ay magiging isang piraso ng cake. Una, kilalanin kung anong elemento ang nais mong bigyan ng isang background na imahe. Sa aming halimbawa, magdaragdag kami ng isang background sa buong pahina. Nangangahulugan ito na nais naming baguhin ang istilo ng katawan . Tandaan, naglalaman ang mga body tag ng lahat ng mga nakikitang elemento.

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

Upang baguhin ang istilo ng katawan sa CSS, gamitin muna ang katawan keyword. Pagkatapos magdagdag ng mga kulot na bracket tulad ng ginawa namin dati {}. Ang lahat ng impormasyon ng estilo para sa katawan ay dapat na nasa pagitan ng mga kulot na braket. Ang katangiang istilo na nais naming baguhin ay background-imahe . Maraming mga katangian ng istilo. Huwag asahan mong kabisado lahat. I-bookmark ang isang CSS na cheat-sheet na may mga katangian na nais mong matandaan.

Kaugnay: 8 Mga Cool na Epekto ng HTML Na Maaaring Idagdag ng Sinuman sa Kanilang Website

hindi gumagana ang aking touch pad

Matapos ang katangian, gumamit ng isang tutuldok upang ipahiwatig kung paano mo babaguhin ang katangian. Upang mag-import ng isang imahe, gamitin url () . ipinapahiwatig nito na gumagamit ka ng isang link upang ituro ang imahe. Ilagay ang lokasyon ng file sa mga braket sa pagitan ng mga marka ng panipi. Panghuli, tapusin ang linya sa isang kalahating titik. Bagaman ang white space ay walang kahulugan sa CSS, gumamit ng indentation upang gawing mas madaling basahin ang CSS.

Ganito ang aming halimbawa:

Kung ang iyong imahe ay hindi nagpapakita ng tama dahil sa laki ng imahe, maaari mong direktang baguhin ang imahe. Gayunpaman, may mga katangian ng istilo ng background sa CSS na maaari mong gamitin upang baguhin ang background. Ang mga larawang mas maliit kaysa sa background ay awtomatikong maaulit sa background. Upang patayin iyon, idagdag background-ulitin:hindi na ulit; sa iyong elemento.

Mayroon ding dalawang paraan upang makagawa ng isang imahe na masakop ang buong background. Una, maaari mong itakda ang laki ng background sa laki ng screen kasama laki ng background: 100% 100%; , ngunit ito ay mag-uunat ng imahe at maaaring ibaluktot ang imahe ng masyadong maraming. Kung hindi mo nais na mabago ang mga sukat ng imahe, maaari mo ring itakda ang laki ng background sa takip . Gagawin ng takip ang imahe ng background na takpan ang background, ngunit hindi papangitin ang imahe.

Pagbabago ng Kulay sa Background

Baguhin natin ang isang huling bagay. Ngayon na mayroon kaming background, mahirap basahin ang aming talata. Gawin nating puti ang background nito. Ang proseso ay katulad. Ang sangkap na nais naming baguhin ay #ourParagraph. Ipinapahiwatig ng # na ang 'ourParagraph' ay isang id na pangalan. Susunod, nais naming itakda ang kulay ng background puti ang katangian

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}

Mas mabuti.

Pagpapatuloy sa Disenyo ng Iyong Website Sa CSS

Ngayon na alam mo kung paano baguhin ang istilo ng iba't ibang mga elemento ng HTML, ang langit ang limitasyon! Ang pangunahing pamamaraan upang baguhin ang mga katangian ng estilo ay pareho. Tukuyin ang elemento na nais mong baguhin, at ilarawan kung paano baguhin ang katangian. Ang pinakamahusay na paraan upang matuto nang higit pa ay upang maglaro sa iba't ibang mga katangian. Hamunin ang iyong sarili na baguhin ang kulay ng iyong teksto sa susunod.

Magbahagi Magbahagi Mag-tweet Email Ang 8 Pinakamahusay na Mga Site para sa Mga Halimbawa ng Kalidad ng HTML Coding

Nais bang malaman ang HTML upang mai-code ang iyong sariling mga website at app? Gamitin ang mga halimbawang web page na ito at source code upang turuan ang iyong sarili ng HTML at CSS.

Basahin Susunod Mga Kaugnay na Paksa
  • Programming
  • HTML
  • Disenyo ng web
  • CSS
Tungkol sa May-akda Jennifer Seaton(21 Artikulo Nai-publish)

Si J. Seaton ay isang manunulat ng Agham na dalubhasa sa pagwawasak ng mga kumplikadong paksa. Mayroon siyang PhD mula sa University of Saskatchewan; ang kanyang pananaliksik ay nakatuon sa paggamit ng pag-aaral na batay sa laro upang madagdagan ang pakikipag-ugnayan ng mag-aaral sa online. Kapag hindi siya nagtatrabaho, mahahanap mo siya sa kanyang pagbabasa, paglalaro ng mga video game, o paghahardin.

Higit pa Mula kay Jennifer Seaton

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