Sveiki atvykę į mano tinklaraštį. Mes ir toliau suprantame html pagrindai. Ši pamoka bus tokia paprasta ir įdomi, kad tikiuosi, kad norėsite daugiau sužinoti apie programavimo kalbas. Vos per kelias minutes išmoksite sukurti paveikslėlį kaip foną HTML ir pasieksite puikių rezultatų.
Taip pat pakalbėsiu apie keletą niuansų, kurie padarys foną kuo lygesnį ir gražesnį. Na, ar pradėsime?
Paveikslo pasirinkimasNorėčiau pradėti nuo paveikslėlio pasirinkimo. Kad puslapyje atrodytumėte tolygiau ir gražiau ir nereikėtų sukti galvos dėl dydžių ir derinimo. Siūlau iš karto ieškoti vientisų tekstūrų. kas tai?
Deja, neįmanoma ištempti vaizdo html formatu, kad jis užpildytų visą ekraną. Nuotrauka naudota realaus dydžio. Jei paveikslėlis mažas, jis apims visą plotą, kaip parodyta toliau pateiktoje ekrano kopijoje. Norėdami ištempti vaizdą, turėsite sukurti papildomą CSS dokumentą, be jo jis neveiks.
Tačiau jūs turite galimybę apeiti sistemą. Norėdami tai padaryti, naudokite Photoshop ir paveikslėlius iki ekrano pločio (1280x720). Nors šiuo atveju, slenkant žemyn, paveikslėlis pakeis kitą.
Daug geresnis pasirinkimas, jei nenorite naudoti css, yra naudoti vientisas tekstūras. Jie neturi matomų sąnarių. Jos savo dizainu primena tapetus ar modernias plyteles. Vienas pakeičia kitą ir nesimato jokių jungčių.
Jei jus domina teisinių pasekmių nebuvimas dėl jų naudojimo, rekomenduoju ieškoti svetainėje Pixabay.com.
Dabar dirbkime su kodu. Iš karto turėčiau pastebėti, kad dabar dirbame su html, tai yra, keičiame vaizdą ne visai svetainei, o tik vienam konkrečiam puslapiui, kuriam rašomas kodas. Jei norite pakeisti visą šaltinį, turite sukurti kodą naudodami css, bet daugiau apie tai vėliau.
Taigi, galite dirbti užrašų knygelėje, man labiau patinka NotePad++. Jame dirbti daug patogiau: kodas užpildytas už jus, žymos paryškintos. Programa yra nemokama ir sveria apie 3 MB. Labai rekomenduoju, ypač jei esate pradedantysis.
Taigi, prie etiketės kūno reikia pridėti atributą fone ir nurodykite nuorodą į vaizdą, iš kurio bus padaryta nuotrauka. Taip atrodo programoje.
Galite tiesiog atidaryti užrašų knygelę ir nukopijuoti šį kodą. Kabutėse įdėkite nuorodą į jums patinkantį paveikslėlį.
| Fono vaizdas |
Fono vaizdas
Pradedantiesiems norėčiau atkreipti dėmesį, kad tai yra esmė. Jei fotografuojate iš Pixabay, nuorodą turite įklijuoti ne puslapyje su vaizdu, o atidaryti vaizdą kitame skirtuke.
Nukopijuokite šį tikslų URL.
Išsaugokite dokumentą. Nepamirškite, kad jei naudojate užrašų knygelę, turite naudoti . html. Tiesiog pavadinkite dokumentą, pvz. atgal.html. Priešingu atveju jis bus išsaugotas kaip tekstinis dokumentas ir naršyklė tiesiog nesupras, ką jai reikia daryti.
Atlikta, puslapis užpildytas kita spalva.
Jei norite sužinoti daugiau apie html, siūlau atsisiųsti nemokamas Jevgenijaus Popovo kursas. Iš jo sužinosite daugiau žymų, kalbinių galimybių, išbandysite naujų technikų ir sužinosite daugiau.
Nesakysiu, kad Jevgenijaus Popovo kursai yra nepaprastai populiarūs. Daugelis ekspertų jį smerkia, o jei susidūrėte su tokiais teiginiais, tai čia yra mano nuomonė. Šios pamokos yra nemokamos ir, nepaisant to, jos puikiai atlieka savo pagrindinę užduotį - parodyti pradedančiajam pagrindus ir supažindinti jį su naujienomis.
Kaip kiekvienas rašytojas turi savo nuomonę apie tai, kaip rašyti, taip ir programuotojai turi savo stilių. Galite praleisti visą gyvenimą mokydamiesi kurti svetaines, bet jūs turite kažkur pradėti. Iš knygų? Ne šitas. Taip, juose yra patikimesnė informacija, naujausia informacija, bet juos taip sunku įsisavinti.
Nesutinka su manimi? Galiu pasiūlyti alternatyvą. Elizabeth ir Erica Freeman knyga Mokymasis HTML, XHTML ir CSS“ Nelabai nuobodus bestseleris ir buvo išleistas ne taip seniai, 2016 m. Informacija dar nėra pasenusi.
Jei jums reikia, kad fonas būtų kartojamas visuose jūsų svetainės puslapiuose, CSS yra būtinas. Žinoma, kiekvieną kartą galite nurodyti kelią, kaip ir ankstesniame skyriuje. Tačiau įsivaizduokite, jei laikui bėgant jums reikės ją pakeisti: nuoroda pasensta arba tiesiog norite pakeisti dizainą. Eiti į kiekvieną puslapį ir pakeisti kodą? Taip neveiks.
CSS padeda išspręsti šią problemą. Turite sukurti failą su css plėtiniu ir įvesti šį kodą:
body (fonas: url (failo kelias); )
Pakalbėkime šiek tiek apie patį kodą. Skliausteliuose, po url galite įvesti nuorodą į paveikslėlį iš trečiosios šalies šaltinio arba tiesiog dokumento pavadinimą, jei paveikslėlis yra tame pačiame aplanke kaip ir šis failas.
Tiems, kurie nori žinoti geriauSu css galite pasitempti fono paveikslėlis, įsitikinkite, kad jis nesikartos, pridėkite GIF animaciją ir dar daugiau.
Negalite visko surašyti viename straipsnyje. Ir aš nekėliau sau tokios užduoties. Yra daug subtilybių, ir jei jie žada viską pasakyti viename straipsnyje, tai yra ne kas kita, kaip apgaulė.
Ar norite išmokti taisyklingai rašyti svetaines? Rekomenduoju mokytis programavimo kalbų. Galiu rekomenduoti Andrejaus Bernatskio kursą “ HTML5 ir CSS3 nuo nulio iki profesionalaus“ Man labai patinka šis autorius. Prieš keletą metų aš nelankiau šio konkretaus kurso, buvo kažkas panašaus, bet mažiau modernaus.
Autorė labai gražiai kalba, viskas paprasta ir suprantama. Šio kurso akcentas yra tai, kad jūs ne tik mokotės, bet ir kuriate konkrečią svetainę kartu su dėstytoju. Dėl to gausite vizitinę kortelę, tinklaraštį ir net internetinę parduotuvę. Labai kietas. Pirmąsias tris šio kurso teorines pamokas apie HTML5 galite žiūrėti čia ir dabar.
Beje, kartu su šiuo kursu gausite 7 premijas: Andrejaus Bernatskio html ir css pagrindus, išdėstymą pradedantiesiems, nukreipimo puslapio kūrimą per vakarą ir daug daugiau. Prieš pradėdami rimtai treniruotis, išbandykite nemokamą kursą " Praktikuokite HTML5 ir CSS3».
Na, tai iš esmės viskas. Norėdami sužinoti daugiau, užsiprenumeruokite naujienlaiškį. Netrukus aš jums papasakosiu šiek tiek daugiau adaptyvus išdėstymas, padidinti pajamas iš bet kurio tinklaraščio ir duoti jums daug naudingų patarimų apie darbo supaprastinimą. Iki pasimatymo ir sėkmės jūsų darbuose.
Sveiki. Šiandien apžvelgsime, kaip galite išplėsti foną naudodami CSS įrankius (be kitų įrankių, pvz., „Javascript“ ir kitų panašių).
Ištempti CSS fonas priemonės tapo įmanomos atsiradus CSS3, ypač naudojant fono dydžio ypatybę. Turiu pasakyti, kad ši savybė veikia daug geriau nei panašūs Javascript sprendimai (kurie buvo naudojami prieš pasirodant fono dydžiui), nes greičiau ir adekvačiau reaguoja į naršyklės dydžio pokyčius, greičiau išlygina ištemptą vaizdą ir kaip. 2000-ųjų pradžioje jie mėgo sakyti x, - „Veiks net ir išjungus Javascript“.
Sprendimas: Kaip ištempti foną naudojant CSS įrankiusFono dydžio nuosavybė gali turėti kelias vertes.
1) tai gali būti viena iš direktyvų: padengti arba įterpti.
Fono dydis: yra; /* Pakeičia vaizdo mastelį išlaikant proporcijas, kad visas vaizdas tilptų bloko viduje. */ fono dydis: viršelis; /* Pakeiskite vaizdą išlaikant formato santykį, kad jo plotis arba aukštis būtų lygus bloko pločiui arba aukščiui. */
2) tai gali būti procentinė dalis (100 % arba 94 % konteinerio pločio). Tokiu atveju galite naudoti arba 1 procentinę reikšmę, arba 2. Jei yra 2 reikšmės, tuo pačiu metu bus keičiamas ir vaizdo aukštis, ir plotis, o kiekviena reikšmė koreguojama proporcingai procentams, nurodytiems parametrai).
Fono dydis: 100%; /*Atitinka viršelio direktyvą*/ fono dydis: 100% 50%; /*Plotis bus 100% bloko pločio, bet aukštis tik 50%, vaizdas greičiausiai bus deformuotas*/
3) tiesiogiai skaitinė reikšmė (piskeliais, centimetrais, em ir kt.). Taip pat gali būti 2 (arba 1) parametrai, kaip ir ankstesniu atveju.
4) vertė auto. Nurodo, kad vaizdas nebus ištemptas, bet bus naudojamas originalus dydis. Šiuo atveju taip pat gali būti 2 arba 1 parametras. Tai yra, galite nurodyti:
Fono dydis: 60% automatinis; /*vaizdo plotis bus 60%, o aukštis proporcingas pradinio vaizdo dydžiui*/
Kur veiktų CSS fono tempimo sprendimas?Sprendžiant iš „Can I Use“ svetainės, jis veiks visose šiuolaikinėse naršyklėse, įskaitant ne žemesnes nei 9 IE versijas. Taigi iš esmės nerimauti nėra pagrindo. Žr. suderinamumo lentelę: 
Šios pamokos tikslas – pažvelgti į būdus, kaip sutvarkyti svetainės fono paveikslėlį, kuris visada tęsis visame naršyklės lange.
Technika naudojant tik CSS. 1 dalis.Naudojant įterptinį elementą , kurios dydį galima keisti bet kurioje naršyklėje. Nustatome minimalaus aukščio ypatybę, kad naršyklės langas būtų užpildytas vertikaliai, o plotis – 100%, kad būtų užpildytas horizontaliai. Taip pat nustatėme, kad minimalaus pločio ypatybė būtų lygi vaizdo pločiui, kad ji niekada nesumažėtų.
Triukas yra naudoti medijos užklausą norint patikrinti, ar naršyklės lango plotis yra mažesnis už vaizdo plotį, ir naudoti procentinės reikšmės kairėje ypatybėje ir neigiamą kairiosios paraštės vertės derinį, kad būtų centre fonas. vaizdas.
Štai CSS kodas:
Img.bg ( /* Nustatykite fono užpildymo taisykles */ min. aukštis: 100%; min. plotis: 1024 pikseliai; /* Proporcingumo koeficiento nustatymas */ plotis: 100%; aukštis: automatinis; /* Nustatykite padėtį */ padėtis: fiksuota: 0 512px; / * 50% */ )
Dirba:
Bet kuri įprastos naršyklės versija: Safari / Chrome / Opera / Firefox.
IE 6: neveikia, bet galite naudoti kai kurias padėties nustatymo gudrybes.
IE 7/8: Veikia didžiąją laiko dalį, necentruoja mažų vaizdų, bet tinkamai užpildo ekraną.
IE 9: veikia.
Kitas būdas išspręsti problemą yra įdėti įterptą elementą puslapyje nustatykite jo padėtį viršutiniame kairiajame kampe ir nustatykite minimalaus pločio bei minimalaus aukščio ypatybes į 100%, išlaikydami proporcingumo koeficientą.
#bg ( padėtis: fiksuota; viršuje: 0; kairėje: 0; /* Išsaugokite formato santykį */ min-plotis: 100 %; min-aukštis: 100 %; )
Tačiau tai necentruoja vaizdo. Taigi apvyniokime vaizdą elementu. Tai bus dvigubai didesnis už naršyklės langą. Jame įdėtas vaizdas išlaikys savo proporcijas ir visiškai uždengs naršyklės langą, būdamas tiksliai centre.
#bg ( padėtis: fiksuota; viršuje: -50%; kairėje: -50%; plotis: 200%; aukštis: 200%; ) #bg img ( padėtis: absoliutus; viršuje: 0; kairėje: 0; dešinėje: 0; apačia:0 paraštė:automat.min.plotis:50%;
Dirba:
„Safari“ / „Chrome“ / „Firefox“ (išbandyta ne visose versijose, bet puikiai veikia naujausiose).
IE 8+.
Opera (bet kuri versija) ir IE atsisako dirbti šiuo metodu (neteisinga vaizdo padėtis).
Idėja labai paprasta, jei vaizdo kraštinių santykis (linijos elementas bus naudojamas kaip fonas) lyginamas su naršyklės lango formato santykiu. Jei paveikslėlyje jis yra mažesnis, turite jį priskirti tik Vaizdo pločio ypatybė nustatyta į 100 % ir ji užpildys ekraną tiek aukštyje, tiek pločio. O jei daugiau, tada paskirkite tik Vaizdo aukščio ypatybė nustatyta į 100%.
#bg ( padėtis: fiksuota; viršuje: 0; kairėje: 0; ) .bgwidth ( plotis: 100 %; ) .bgheight ( aukštis: 100 %; )
$(function() ( var theWindow = $(langas), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() ( if ((theWindow) .width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
Dirba:
IE7+ (su šaknimis, tikriausiai veiks IE6)
Visose kitose naršyklėse.
Kiekvienas sprendimo būdas turi savo privalumų ir trūkumų. Jums tereikia pasirinkti tinkamą konkrečiam atvejui. Na, arba pasiūlykite savo.
Šią pamoką radau viename youtube kanalas. Mano nuomone, labai naudinga interneto dizainerio funkcija.
Kartais jokiai dizaino idėjai neužtenka originalaus vaizdo pločio, o ištempus jį per plotį iškreipiami norimi objektai. Kad šie objektai liktų nepažeisti ir ištemptų vaizdo foną, „PhotoShop“ suteikia mums tam tikrų įrankių. Taigi, galų gale turime iš pradinio vaizdo:
Tai turėtų atrodyti taip:
Pradėkime. Atidarykite mūsų vaizdą „PhotoShop“ ir pasirinkite mums reikalingą objektą:
Tada eikite į skirtuką Pasirinkimas >> Išsaugoti pasirinktą sritį
Ir nustatykite tam tikrą šio pasirinkimo pavadinimą:
Taip sukūrėme sritį, kuri vėliau bus apsaugota nuo pokyčių. Kitas žingsnis eikite į Redaguoti >> Turiniu pagrįsta skalė:
Ir būtinai nurodykite saugomą objektą:
Visi. Belieka pakeisti vaizdo plotį naudojant standartinius įrankius (arba viršutinė plokštė pakeisdami pločio procentą arba tiesiog vilkdami vaizdą). Svarbu prieš tai (arba pačiame pradiniame etape) pakeisti drobės dydį, kad vaizdo ribos neperžengtų jo matomumo srities.
Prisimenu, knaisiojau daug informacijos ir išbandžiau daugybę metodų, kol radau tikslų sprendimą, kurio tuo metu reikėjo.
Žemiau parodysiu 3 metodus, kurie ištempia foną iki viso ekrano pločio.
1 metodasPirmasis metodas naudoja gryną CSS3. Viskas veikia dėl fono dydžio savybės. Mano atveju vaizdą ištempsiu per visą ekrano plotį, tai yra, body tag'ui priskirsiu ypatybes. Pavyzdžiui, jei reikia, galite pritaikyti jį blokui.
Ištempsime šį paveikslėlį su miela mergina, kad užpildytume visą ekraną :)
Apskritai mes apibrėžiame bloką, kuriam priskiriame stilius, ir pridedame šį kodą į šio bloko stiliaus failą:
Turinys (fonas: url(images/bg.jpg) nekartojantis centras viršuje fiksuotas; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; fono dydis: viršelis)
Kaip matote, fono parametre pridedame kelią į vaizdą ir nustatome vaizdo padėtį ekrano atžvilgiu. Mūsų atvejais tai yra centre ir viršuje. Tai reiškia, kad paveikslėlis bus ekrano centre, o jo viršus bus prispaustas prie ekrano viršaus. Taip yra, kad merginos veidas visada būtų matomas. Jei, pavyzdžiui, turite abstraktų foną arba gamtą, kur galite matyti dangų, lauką, horizontą, tuomet galite nustatyti reikšmes centre ir centre. Apskritai, jei esate susipažinę su CSS, manau, kad suprasite. Jis taip pat nustatytas kaip fiksuotas, o tai sustabdo vaizdą.
Metodas labai paprastas, aš jį visada naudoju ir jis man tinka 100%. Yra tik vienas dalykas. Senos naršyklės nėra susipažinusios su CSS3, todėl naudojantys senąsias versijas norimo rezultato nematys.
2 metodasŠis metodas naudoja įprastą CSS. Iš esmės tai taip pat paprasta. Svetainės turinyje rodome vaizdą, priskirdami id-bg:
Ir mes rašome stilius:
#bg (padėtis: fiksuota; z indeksas: -1; viršuje: 0; kairėje: 0; min. plotis: 100 %; min. aukštis: 100 %; )
Padėtis yra fiksuota ir tęsiasi per visą ekraną.
3 būdasČia naudojamas jQuery. Todėl pirmiausia turite prijungti biblioteką, jei ji nebuvo prijungta anksčiau.
Po bibliotekos sujungiame scenarijų, kuris padidins mūsų fono mastelį
$(langas).load(function() ( var theWindow = $(langas), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); funkcija resizeBg() ( if ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
Ir pabaigoje pridedame stilių, kad viskas veiktų. Atidarykite stiliaus failą ir pridėkite prie jo šį kodą:
#bg ( padėtis: fiksuota; viršuje: 0; kairėje: 0; z indeksas: -1; ) .bgwidth ( plotis: 100 %; ) .bgheight ( aukštis: 100 %; )
Iš stilių matote, kad pridėjome pozicionavimą. Šiuo atveju jis yra fiksuotas. Slenkant vaizdas išliks fiksuotas fonas, bet jei pakeisite padėtį į absoliučią , fonas gali būti slinktas. Beje, tą patį galima padaryti ir su pirmaisiais dviem būdais.
Taip pat nurodomas parametras - z-index: -1, kad vaizdas būtų už teksto. Jei neturite teksto, kuris turėtų būti priekyje, galite pašalinti šią parinktį.
Kurį metodą naudoti, priklauso nuo jūsų. Kaip rašiau aukščiau, pirmasis metodas man artimesnis. Tai paprasčiausias ir ne blogesnis už kitus.
Tai viskas, ačiū už dėmesį. 🙂