###
  • Programi
  • Sigurnost
  • Vijesti
  • Zanimljiv
  • Savjet
  • Vijesti
  • Recenzije

    • Kako razvući sliku na cijeli ekran html. Rastezanje pozadine slike uz zadržavanje proporcija određenog objekta. Prekrasno, jednostavno i napredno rješenje koje koristi CSS3

    07.09.2020 Savjet

    Lijepi pozdrav. U ovom članku želim podijeliti tri načina za postavljanje slike kao pozadine cijele stranice koristeći samo HTML + CSS (bez JS).

    Dakle, naši zahtjevi za pozadinsku sliku su sljedeći:

    • Pokriva 100% širine i visine stranice
    • Pozadina se skalira ako je potrebno (pozadina se razvlači ili komprimira ovisno o veličini zaslona)
    • Omjer slike je sačuvan
    • Slika je centrirana na stranici
    • Pozadina ne uzrokuje pomicanje
    • Rješenje je što je više moguće kompatibilno s više preglednika
    • Ne koriste se druge tehnologije osim CSS-a
    Metoda 1

    Po mom mišljenju ovo je Najbolji način, jer je najjednostavniji, najsažetiji i najmoderniji. Koristi CSS3 svojstvo veličine pozadine, na koje se primjenjujemo html oznaka. To je html, a ne tijelo, jer njegova visina je veća ili jednaka visini prozora preglednika.

    Postavite pozadinu da bude fiksna i centrirana, a zatim prilagodite njezinu veličinu koristeći background-size: cover .

    Html (pozadinska slika: url(slike/pozadina.jpg); pozadinsko ponavljanje: bez ponavljanja; pozadina-pozicija: centar centar; pozadinski privitak: fiksno; -webkit-veličina-pozadine: naslovnica; -moz-pozadina- veličina: naslovnica; -o-veličina-pozadine: naslovnica; veličina-pozadine: naslovnica; )

    Ova metoda djeluje u

    Chrome (bilo koja verzija) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

    Kako biste osigurali brzo učitavanje slika, hostirajte svoje stranice samo kod pouzdanih pružatelja usluga hostinga, kao što su Users i tražilice volim brze stranice. Metoda 2 Ova metoda uključuje korištenje img elementa, čija će se veličina mijenjati ovisno o veličini prozora preglednika. Za rastezanje slike da ispuni cijeli zaslon, potrebno je postaviti minimalnu visinu i širinu na 100%. Kako slika ne bi bila komprimirana na veličinu manju od izvorne, postavite minimalnu širinu s vrijednošću koja je jednaka širini slike.

    Ako je širina prozora manja od širine slike, upotrijebit će se medijski upit za centriranje pozadine.

    img.background ( min-height: 100%; min-width: 640px; width: 100%; height: auto; position: fixed; top: 0; left: 0; /* Ovisi o veličini slike */ @media screen i (max-width: 640px)( img.bg ( lijevo: 50%; margin-lijevo: -320px; ) ) )

    Ova metoda djeluje u:

    • Bilo koja verzija dobrih preglednika (Chrome, Opera, Firefox, Safari)
    • IE 9+
    Metoda 3

    Drugi način je sljedeći: popraviti sliku u gornji lijevi kut stranice i rastegnite ga pomoću svojstava minimalne širine i minimalne visine od 100%, zadržavajući omjer širine i visine.

    Istina, ovim pristupom slika nije centrirana. Ali ovaj problem je riješen umotavanjem slike u , koji napravimo 2 puta veći od prozora. I rastežemo samu sliku i postavljamo je u središte.

    div.background ( pozicija: fiksna; gore: -50%; lijevo: -50%; širina: 200%; visina: 200%; ) img ( pozicija: apsolutna; gore: 0; lijevo: 0; desno: 0; dno : 0; margina: auto; min. širina: 50%; min. visina: 50%; )

    Ova metoda djeluje u dobri preglednici i IE 8+.

    Nadam se da će vam ove informacije biti korisne. Osobno često koristim ove metode, pogotovo prvu. Vjerojatno postoje drugi načini za postavljanje slike pozadina koristeći CSS. Ako znate za njih, podijelite ih u komentarima.

    Ovdje ćemo ga analizirati što detaljnije. Kako možete implementirati pozadinu za internetski resurs koji bi trebao pokriti cijeli radni prostor? Uglavnom se sve radi u CSS3, također možete povezati jQuery pa čak i PHP, ali pogledajmo jednu opciju koja koristi čisti CSS. Prvo morate razumjeti ili odrediti što bi se trebalo dogoditi. Ovo je, naravno, potpuno ispunjenje prozora pozadinom ili slikom, tako da nema praznina.

    Gdje ćemo razvući sliku da izgleda korektno, jer ako je podloga ispod jedne nijanse lakše je raditi s njom. Ne zaboravite uskladiti sliku s njezinim proporcijama. I svakako bi trebalo ispasti da je slika centrirana. Glavno je da sve bude što je moguće više kompatibilno i razumljivo, bez raznih smicalica s flashom.

    CSS3 pozadinska metoda Ovo je najčešća metoda koja može rastegnuti pozadinu na čistom CSS-u, a sve zahvaljujući jednom svojstvu tzv. veličina pozadine, koji će biti prisutan samo u CSS3.

    Ovdje ćemo u početku kreirati fiksnu pozadinu i postaviti je u centar, tako da ostaje samo da je razvučemo, gdje povezujemo svojstva veličine pozadine, sve to ide ispod reference pozadine.

    Općenito, fokusiramo se na blok kojemu dodjeljujemo stilove i dodajemo sljedeći kod u datoteku stilova za ovaj blok:

    tijelo(
    pozadina: url(http://site/Aben/ABGDA/artunsa.png) bez ponavljanja centar gore fiksno;
    -webkit-veličina-pozadine: naslovnica;
    -moz-veličina-pozadine: naslovnica;
    -o-veličina-pozadine: naslovnica;
    veličina pozadine: naslovnica;
    }


    Kao što vidite, parametar pozadine, gdje inicijalno dodajemo putanju do slike, gdje je položaj slike postavljen tako da odgovara prozoru na ekranu. Ako pogledate, vrijednosti centra i vrha odgovorne su za centar i pritisak sa svih strana tako da nema razmaka. Da pojasnimo, fiksna vrijednost odgovorna je za funkciju fiksacije.

    Metoda je sasvim obična, koju koristim stalno i odgovara mi 100% posto.

    Drugi način:

    Druga uobičajena metoda je umetanje slike na stranicu. Imat će fiksnu poziciju i nalazit će se u gornjem lijevom kutu. Dat ćemo mu minimalnu širinu i minimalnu visinu od 100%. Također je potrebno unaprijed pripremiti sliku kako bi se osigurala proporcionalnost strana.

    #web stranica (
    položaj: fiksni;
    vrh:0;
    lijevo:0;
    min-širina:100%;
    min-visina:100%;
    }


    Ovdje možete vidjeti da ovaj kod ne centrira pozadinsku sliku, da možete brzo napraviti sve što je potrebno, odnosno popraviti sliku tako da je ubacite u div.


    .jpg" alt="">


    CSS

    #web stranica (
    položaj: fiksni;
    vrh:-50%;
    lijevo:-50%;
    širina:200%;
    visina:200%;
    }
    #site img (
    pozicija: apsolutna;
    vrh:0;
    lijevo:0;
    desno:0;
    dno:0;
    margina:auto;
    min-širina:50%;
    min-visina:50%;
    }


    To je sve, ovdje nisu predstavljene sve metode, već one koje čine najveću razliku.

    Također kratki video u kojem je sve jasno objašnjeno kako rastegnuti pozadinu da ispuni cijeli ekran koristeći CSS.

    PS - ako imate vlastito iskustvo, iako bi ovdje sve trebalo biti isto. onda podijelite s njima u komentarima.

    Dobar dan, štreberima za izradu web stranica i ljubiteljima weba. Danas želim dati odgovor na pitanje koje često postavljaju ne samo početnici, već ponekad i programeri: "Kako se rastegnuti css slika na cijelom ekranu?" Zapravo, ova tehnika je vrlo jednostavna za implementaciju, ali poanta je drugačija.

    Danas postoji mnogo metoda i programskih jezika, zahvaljujući kojima se slika može postaviti na cijeli ekran. Stoga ću u ovoj publikaciji govoriti o nekoliko načina za stvaranje pozadinske slike u punoj veličini css pomoć, css3, jquery i php. Primimo se posla!

    Metoda 1. Adaptivna pozadinska slika pomoću CSS alata

    Kako bi se pozadinska slika prilagodljiv; kaskadni listovi stilova imaju svojstvo veličine pozadine. Omogućuje vam postavljanje veličine grafička datoteka u odnosu na dimenziju otvorena kartica.

    Da biste to učinili, samo trebate napisati ovaj redak:

    veličina pozadine: 100% automatski

    Prvi parametar, tj. 100% je odgovoran za rastezanje slike vodoravno, drugi parametar - okomito. Sada prijeđimo na primjer.

    Primjer s css tijelom ( pozadina: url(http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg) središte bez ponavljanja na vrhu fiksno; -moz-veličina-pozadine: 100% automatski; -webkit- veličina-pozadine: 100% automatski; -o-veličina-pozadine: 100% automatski; veličina-pozadine: 100% automatski; boja:#191970; ) div (pozadina: #6495ED; širina: 86%; margina: 14% 4 % 4% 4%; ispuna: 35px; ) h1 (boja: #191970; sjena teksta: 3px 2px 1px #fff;)

    Ovu metodu podržavaju preglednici počevši od verzije 10, verzije 3 Safarija, Firefoxa 3.6 i verzije 9 IE.

    Metoda 2. Gumena pozadina pomoću css3

    Izlaskom specifikacije css3 u svijet, mnogo je toga dodano jeziku prikladni alati. Dakle, za stvaranje istegnute pozadine u obliku slike koristi se isto svojstvo kao u prethodnom poglavlju, ali veličina slike nije određena postocima, već posebnom riječju cover: background-size: cover. Vrlo zgodno, zar ne?

    Da vidim kako radi ovo svojstvo, pokrenite prethodni primjer, mijenjajući parametre veličine pozadine na 100% i auto za pokrivanje.

    jQuery je sam po sebi vrlo zgodan. Omogućuje lakši rad s API-jem, lakši pristup različitim elementima koda, a također i lakšu implementaciju nekih stvari.

    Da bi to funkcioniralo u primjeru ovu metodu, prvo trebate povezati js skriptu s ovim redom:

    U nastavku sam priložio primjer koda s već umetnutom jQuery implementacijom.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 jQuery primjer< aspectRatio) { $b-g .removeClass() .addClass("b-g-h"); } else { $b-g .removeClass() .addClass("b-g-w"); } } wind.resize(function() { resizeBg(); }).trigger("resize"); }); Planetarij na otvorenom!

    Doživite daleke zvijezde, planete i lunarne kratere...

    Primjer s jQuery tijelom (veličina pozadine: naslovnica; boja:#191970; ) div (pozadina: #6495ED; širina: 86%; margina: 14% 4% 4% 4%; ispuna: 35px; ) h1 (boja: # 191970; sjena teksta: 3px 2px 1px #fff; ) #b-g (gore: 0; lijevo: 0; z-indeks:-1; položaj: fiksno; ) .b-g-w ( širina: 100%; ) .b-g-h ( visina: 100%; ) $(window).load(function() ( var wind = $(window), $b-g = $("#b-g"), aspectRatio = $b-g.width() / $b-g.height(); funkcija resizeBg() ( if ((wind.width() / wind.height())< aspectRatio) { $b-g .removeClass() .addClass("b-g-h"); } else { $b-g .removeClass() .addClass("b-g-w"); } } wind.resize(function() { resizeBg(); }).trigger("resize"); }); Planetarij na otvorenom!

    Doživite daleke zvijezde, planete i lunarne kratere...

    Ova je metoda univerzalna i podržavaju je mnogi preglednici čak i kada CSS alati ne rade.

    Metoda 4. Php implementacija slike rastegnute da ispuni cijeli zaslon

    Nekoliko riječi o samom jeziku. Php se obično naziva skriptni jezik. Uz njegovu pomoć pišu poslužiteljski dio web aplikacije, tj. povezati uslugu s bazom podataka, obraditi zahtjeve itd. Sebe php kod je ugrađen u html i fleksibilno komunicira s njim.

    Da biste umetnuli dio koda, trebate napisati tekst u zagradama ovako:

    Sada samo trebate umetnuti nekoliko redaka u izvorni primjer:

    1 2 3 4 5

    Zadatak

    Razvucite pozadinsku sliku na punu širinu prozora preglednika pomoću CSS3.

    Riješenje

    Za skaliranje pozadine upotrijebite svojstvo veličine pozadine; postavite njegovu vrijednost na 100%, tada će pozadina zauzeti cijelu širinu prozora preglednika. Za starije verzije preglednika trebali biste koristiti određena svojstva s prefiksima, kao što je prikazano u primjeru 1.

    Primjer 1: Rastezljiva pozadina

    HTML5 CSS 2.1 IE Cr Op Sa Fx

    Rastezljivo tijelo pozadine ( background: url(images/sun2.png) no-repeat; -moz-background-size: 100%; /* Firefox 3.6+ */ -webkit-background-size: 100%; /* Safari 3.1+ i Chrome 4.0+ */ -o-background-size: 100%; /* Opera 9.6+ */ background-size: 100%; /* Moderni preglednici */ )

    Proizlaziti ovaj primjer prikazano na sl. 1.

    Riža. 1. Pogled na pozadinu sa smanjenom veličinom prozora

    Kako se veličina prozora preglednika povećava, pozadina će se također početi širiti, što će dovesti do pogoršanja izgleda slike (slika 2).

    Riža. 2. Pogled na pozadinu s uvećanom veličinom prozora

    Našao sam ovu lekciju na jednom youtube kanal. Po mom mišljenju vrlo korisna značajka za web dizajnera.

    Ponekad širina originalna slika nije dovoljan za bilo kakvu dizajnersku ideju, a njegovo rastezanje po širini iskrivljuje željene objekte. Da bi ti objekti ostali netaknuti, a da pritom rastežu pozadinu slike, PhotoShop nam daje određene alate. I tako, na kraju imamo iz originalne slike:

    Trebalo bi izgledati ovako:

    Započnimo. Otvorite našu sliku u PhotoShopu i odaberite objekt koji nam je potreban:


    Zatim idite na karticu Odabir >> Spremi odabrano područje


    I postavite neko proizvoljno ime za ovaj odabir:


    Tako smo stvorili područje koje će naknadno biti zaštićeno od promjena. Sljedeći korak je otići na Uredi >> Mjerilo temeljeno na sadržaju:


    I obavezno navedite zaštićeni objekt:


    Svi. Sve što ostaje je promijeniti širinu slike pomoću standardne alate(bilo u gornja ploča promjenom postotka širine ili jednostavnim povlačenjem slike). Prije toga (ili u samoj početnoj fazi) važno je promijeniti veličinu platna tako da granice slike ne izlaze izvan područja vidljivosti.