Lizdus svetainė: kaip padaryti fono paveikslėlį HTML

Daugelis naujokas web dizaineriai tik pasinerti į svetainių kūrimo esmę, dažnai stebisi, kaip tai padaryti HTML fono paveikslėlį. Ir jei kai kurie iš jų gali susidoroti su šia problema, tai dar tuo tempimo visą plotį nuotraukos monitoriuje laiko problema. Tuo pačiu metu norėčiau pamatyti svetainėje yra rodomas identiškai visose naršyklėse, todėl turėtų atitikti kryžminio naršyklės reikalavimus. Galite nustatyti fono dviem būdais: naudojant HTML žymes ir CSS stilių. Kiekvienas už save pasirenka geriausią variantą. Žinoma, CSS stilius yra daug patogiau, nes jo kodas yra saugomas atskirame faile ir neužima papildomos garsiakalbius pagrindiniame svetainės žymės, bet pirmiausia panagrinėkime paprastą būdą įdiegti atvaizdą svetainės fone.

Pagrindinis HTML žymes sukurti foną

Taigi, mes einame į klausimą, kaip padaryti fono paveikslėlį HTML ekrane klausimą. Norint atrodyti gražiai svetainę, jūs turite suprasti vieną, o svarbi detalė: jis yra pakankamai tiesiog padaryti gradientas fone arba dažyti tvirtą spalvą, bet jei jums reikia įterpti fono paveikslėlį, jis bus ne ruožas visą plotį monitoriaus. Vaizdas iš pradžių buvo būtina pasiimti arba padaryti savo dizainą su šiuo pratęsimu, kuriame jums bus rodomas puslapį svetainėje. Tik tada, kai fono paveikslėlį yra pasirengusi, vilkite jį į aplanką, pavadinta «paveiksliukai». Be to, mes laikyti visų panaudotų vaizdus, animacijas ir kitus grafinius failus. Šis aplankas turėtų būti įsikūręs šakninį katalogą su visais HTML failus. Dabar galite pereiti ir prie kodo. Yra keletas variantų rašyti kodą, kurį fonas bus pakeisti paveikslėlį.

1. Rašyti žymos atributas.
2. Per CSS stiliaus HTML kodas.
3. Rašyti CSS stilių į atskirą failą.

Kaip HTML padaryti fono paveikslėlį, jums nuspręsti, bet aš norėčiau pasakyti keletą žodžių apie tai, kaip tai būtų optimaliausias. Pirmasis metodas yra raštu per žymos atributas jau seniai paseno. Antrasis variantas yra naudojamas labai retai, nes paaiškėja, kad tos pačios kodas aikštelė. Trečias variantas yra labiausiai paplitęs ir veiksmingas. Štai keli pavyzdžiai HTML žymes:

1. Pirmasis įrašymo metodas per žymos atributas (kūno) į failą index.htm. Tai yra saugomi tokia forma: (kūno fone = "Aplankas" / Nazvanie_kartinki.rasshirenie ") (/ korpusas). Tai yra, jei mes turime nuotrauką su pavadinimu «Picture» ir pratęsimo JPG, ir aplanko mes pavadinome «paveiksliukai», tada HTML kodas įrašas atrodys taip: (kūno fonas = "images / Picture.jpg") ... (/ korpusas) ,
2. Antrasis metodas apima įrašymą CSS stilių, tačiau tai yra parašyta paties failo pavadinimas index.htm. (Kūno style = "background: url ( '../ vaizdai / Picture.jpg')").
3. Trečiasis metodas įrašymo sudaryta dviem failais. Dokumentas su pavadinimu index.htm žyma (vadovas) yra parašyta tokią eilutę: (vadovas) (nuoroda rel = "Stilių" type = "text / css" href = "http: // svetainė / Straipsniai / 193.110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ galvos). Failas vadinamas style.css stilius jau rašyti: kūno {background: url (vaizdai / Picture.jpg ')}.

Kaip HTML padaryti fono paveikslėlį, mes suprantame. Dabar jums reikia išsiaiškinti, kaip ištempti vaizdą per visą ekraną.

Būdai ruožas fono paveikslėlį į lango plotį

Mes atstovaujame mūsų ekraną į procentais forma. Pasirodo, kad visa plotis ir ilgis ekrane bus 100% × 100%. Mums reikia ištempti vaizdą šiuo pločio. Pridėti į vaizdo failo įrašymo style.css linija, kuri bus ištempti vaizdą per visą plotį ir ilgį monitoriaus. Kaip parašyta CSS stiliaus? Tai paprasta!

kūnas

{

fonas: URL (vaizdai / Picture.jpg)

background-dydis: 100%; / * Šis pranešimas yra tinka daugumai šiuolaikinių naršyklių * /

}

Taigi mes sugalvojome, kaip padaryti nuotrauką fone HTML ekrane. Taip pat yra įrašyti į failą index.htm metodas. Nors šis metodas ir pasenusi, bet pradedantiesiems tai būtina žinoti ir suprasti. Žyma (vadovas) (stilius) div {background-size: dangtis; } (/ Stilius) (/ vadovas), šis įrašas reiškia, kad mes skirti ypatingą vienetą fone, kuris bus pastatytas per visą plotį lango. Mes svarstėme du būdus, kaip padaryti foną html puslapį, kad vaizdas ištemptas į visą ekrano plotį bet kuriuo iš šiuolaikinių naršyklių.

Kaip padaryti fiksuotą foną

Jei nuspręsite naudoti nuotrauką kaip būsimo interneto išteklių fone, tada jums tiesiog reikia žinoti, kaip padaryti, kad jis fiksuotas, todėl, kad jis yra ne ištemptas ilgio ir ne sugadinti estetinį vaizdą. Tiesiog naudojant HTML kodą registruoti nedidelį papildymą. Jums reikia pateikti style.css pridėti frazę po fone: URL (images / Picture.jpg) fiksuoto; arba vietoj pridedama po kabliataškis atskirą eilutės - padėtis: fiksuotas. Taigi, jūsų ekrano užsklanda bus fiksuota. Per slinkimo turinį svetainėje, Jūs pamatysite, kad tekstą linijos juda, bet fonas lieka vietoje. Taigi sužinojau, kaip tai padaryti html fono paveikslėlį, keliais būdais.

Darbas su lentelėse HTML

Daugelis nepatyrusių kūrėjai, susiduria su lentelėmis ir blokų, dažnai nesupranta, kaip padaryti HTML paveikslėlio fono lentelę. Kaip ir visos komandos HTML ir CSS stilių, interneto programavimo kalba yra gana paprasta. Ir šios problemos sprendimas yra parašyti eilučių kodo pora. Jūs jau turėtumėte žinoti, kad rašyti eilučių ir stulpelių, atitinkamai lentelę, kaip nurodyta pagal žymes (TR) ir (TD). Padaryti iš iš paveikslėlio pavidalu stalo fonas, būtina pridėti prie žyma (lentelė) (TR) ar (TD) paprastos frazės su nuoroda į atskaitos vaizdas: fone = URL nuotraukas. Siekiant aiškumo, mes suteikiame keletą pavyzdžių.

Stalo su nuotrauka vietoj fone: HTML pavyzdžiai

Lygiosios 2x3 lentelę ir padaryti jį fono paveikslėlį saugomi aplanke "images": (stalo fone = "images / Picture.jpg") (TR) (TD) 1 (/ TD) (TD) 2 (/ TD) (TD) 3) (/ TD) (/ TR) (TR) (TD) 4 (/ TD) (TD) 5 (/ TD) (TD) 6 (/ TD) (/ TR) (/ lentelė). Taigi mūsų stalo bus sudarytas paveikslėlio fone.

Dabar atkreipti tos pačios plokštelės dydžių 2x3, bet įterpti paveikslėlį į stulpelių numeriais 1, 4, 5 ir 6 (lentelė) (TR) (TD foną = "images / Picture.jpg") 1 (/ TD) (TD) 2 (/ TD) (TD) 3 (/ TD) (/ TR) (TR) (TD fono = "vaizdai / Picture.jpg") 4 (/ TD) (TD fono = "vaizdai / Picture.jpg") 5 ( / TD) (TD fono = "vaizdai / paveikslėlis.jpg") 6 (/ TD) (/ tR) (/ lentelė). Po žiūrint matome, kad fonas pasirodo tik tose ląstelėse, kuriose mes registruotų, o ne visą lentelę.

Kryžminio naršyklės suderinamumo svetainė

Yra toks dalykas kaip kryžminio naršyklės suderinamumo interneto išteklių. Tai reiškia, kad jūsų svetainė yra vienodai gerai rodomi įvairių tipų ir versijų naršykles. Ji turėtų būti HTML kodas ir CSS stilių pritaikyti būtinų naršyklių. Be to, šiuolaikinės eros išmaniesiems telefonams, daug interneto svetainių kūrėjai bando kurti svetaines ir pritaikyta mobiliosios versijos ir kompiuterio išvaizdą.