Indlela Yokusetha Isithombe Njengesizinda SeThebula

Sebenzisa impahla yangemuva ye-CSS ukwengeza isizinda sesithombe kumatafula

Ukuhlukanisa amatafula kusuka emasendweni abo kusiza ukugcizelela okuqukethwe kwetafula ngokuphathelene nakho konke okunye ekhasini lewebhu. Ukwengeza imvelaphi yetafula, kuzodingeka ukwenze ishidi lesitayela se-cascading (CSS) esekelwe ikhasi lakho lewebhu.

Ukuqalisa

Indlela engcono kakhulu yokwengeza isithombe sangemuva etafuleni ukusebenzisa imvelaphi ye-CSS. Ukuze uzilungiselele ukubhala i-CSS ngokuphumelelayo nokugwema ukubuka okungalindelekile, bonisa isithombe sakho sangemuva bese wenza inothi lokuphakama nobubanzi.

Bese ulayishe isithombe sakho kumhlinzeki wakho wokubamba. Hlola i-URL yesithombe; esinye sezizathu ezivame kakhulu ukuthi kungani izithombe zingabonisi ngoba kukhona i-typo ku-URL.

Ngemuva kokuthi usuqedile leso sinyathelo, faka ukuvimba kwesitayela se-CSS enhloko yedokhumenti yakho:


  1. Bhala i-CSS yakho ngemuva kwetafula lakho bese uyibeka ngaphakathi kwe-block style:
    ithebula {ingemuva: url (" URL kuya kwesithombe ") akukho-ukuphinda; }}
  2. Beka itafula lakho ku-HTML:


    iseli 1
    iseli 2


    iseli 1
    iseli 2

  3. Hlela ububanzi nokuphakama kwetafula ukufanisa ububanzi besithombe nokuphakama.
    ububanzi: 400px; ukuphakama: 500px; "> ...

Uma okuqukethwe kwethebula lakho kunkulu kunokuphakama kwesithombe nobubanzi, isithombe sangemuva sizobonisa kuphela.

Faka Isendlalelo Ngethebula Elilodwa Elilodwa

Imiyalo engenhla izosetha isithombe esifanayo sangemuva kuwo wonke amathebula ekhasini.

Uma ufuna ukubeka isizinda ematafuleni athile kuphela, udinga ukusebenzisa isici sekilasi.

  1. Shintsha i-CSS yakho ukuze ufunde:
    ibalazwe.background {background: url (" URL kuya kwesithombe ") akukho-phinda; }}
  2. Engeza ingemuva yeklasi kunoma yikuphi ithebula ofuna ukuthola leso sithombe sangemuva. Hlela ububanzi nokuphakama kulawo macwecwe.
    class = "background" isitayela = "ububanzi: 400px; ukuphakama: 500px;> ...

    Vumela i-Table Background Image Phinda

    Amatafula amakhulu, noma amathebula anezinto eziningi, angadinga ukuba nesipiliyoni siphindele ukuze ithebula lonke ligcwaliswe. Shintsha inani ku-CSS yakho ukuze isithombe siphendule ku-y-axis, i-x-axis, noma ihlanganiswe kokubili.

    isizinda: url (" URL kuya kwesithombe ") phinda ;

    Ngokuzenzakalelayo inani eliphindaphindiwe lizobekwa eceleni, kodwa ungasetha futhi inani lokuphindaphinda ukuphindaphinda-x noma uphinde-y ukuze ulandele ngokuqondile noma ngokuqondile, ngokulandelana.

    I-Background Background Colors Vimba i-Table Background Image

    Noma yimiphi imibala yangemuva ehlelwe kumaseli etafula azokwandisa isithombe sangemuva etafuleni. Ngakho-ke qaphela uma usebenzisa imibala yangemuva kumaseli akho ngokuhambisana nemifanekiso yangemuva yetafula.

    Ukucabangela

    Izizinda zeethebula zizobeka amatafula akho eceleni kwekhasi elingaphansi. Noma kunjalo, cabanga kabili ngaphambi kokusebenzisa le nqubo. Ukufaka isithombe esingathathi hlangothi kungase kungaphazamisi, kodwa izithombe eziyinkimbinkimbi ezihloswe ukuba zibe mhle (isibonelo, ukufaka isithombe sezinyane ngemuva kwetafula ebonisa ukutholwa kwezilwane) kungase kubonakale kungenzi lutho futhi kungathinta ukufundwa kwedatha ye- tabular .

    Noma yisiphi isithombe oyisebenzisayo kufanele sinikezwe ilayisensi efanele; ngoba nje ungathola isithombe kuwebhu akusho ukuthi ungakufanelekela ukuzisebenzisa kwakho.

    Hlonipha amalungelo okukopisha!