Jedno od najčešće korištenih css svojstava u izgledu web stranice je svojstvo pozadine elementa stranice. Danas ćemo razgovarati s vama o tome kako možete promijeniti veličinu pozadinska slika uz pomoć.
U više stara verzija CSS 2.1 pozadinska slika primenjena na kontejner je zadržala svoju fiksne dimenzije. Bilo je nemoguće promijeniti veličinu pozadinske slike. Na sreću, CSS3 je uveo svojstvo veličine pozadine, koje se može koristiti za rastezanje ili smanjenje pozadine.
Postoji nekoliko načina za određivanje dimenzija -.
Apsolutna promjena veličine
Ako je specificirana samo jedna vrijednost, pretpostavlja se da je to širina. Visina je postavljena na automatski, a omjer stranica je sačuvan:
Ovaj kod skalira sliku od 200x200 do 100x100 piksela.
Relativna promjena veličine kroz procente
Ako se primjenjuju procenti, dimenzije se zasnivaju na elementu, A NE na slici:
popunjavanje pozadine
Svojstvo background-size također razumije ključna riječ poklopac. Slika će se skalirati kako bi ispunila cijeli kontejner, ali ako se odnos širine i visine razlikuje, slika će biti izrezana.
| :cover; |
Skaliranje više pozadina
Više pozadina može se skalirati pomoću liste vrijednosti razdvojenih zarezima istim redoslijedom.
| pozadina: url ("sheep.png") 60% 90% bez ponavljanja, url ("sheep.png") 40% 50% bez ponavljanja, url ("sheep.png") 10% 20% bez ponavljanja # 393; : 240px 210px , auto , 150px ; |
Sve najnovije verzije pretraživači podržavaju svojstvo veličine pozadine.
Zaključak
Pa, sada znamo kako kontrolirati veličinu pozadinske slike pomoću kaskadnih stilskih tablica.
Ne zaboravite se pretplatiti na ažuriranja bloga kako ne biste propustili nove zanimljive članke.
Jedan od glavnih zadataka u adaptivni raspored je skaliranje slika (uključujući pozadinske slike) na takav način da se ispravno prikazuju na uređajima sa različite dozvole ekrani.
Sa slikama u etiketi img jednostavno je: kada se širina postavlja u postocima, visina će se automatski skalirati. Ova metoda se ne može primijeniti na pozadinsku sliku.
Ovaj trik je da postavite vrijednost kao postotak dopune ( padding) element. Metoda je prvi put objavljena u starom blog postu A List Apart, ali još uvijek dobro funkcionira.
Recimo da imamo pozadinsku sliku od 800 x 450 piksela i želimo da je napravimo pozadinom sa fiksnim omjerom širine i visine 16:9. Kod ispod se koristi za uvlačenje px, ali sve će funkcionirati em. Tu je i HTML5 element figure, za ispravan rad stariji pretraživači mogu koristiti HTML5 shiv .
Div.kolona (maksimalna širina: 800px; ) figura.fiksni omjer (odmak na vrhu: 56,25%; /* 450px/800px = 0,5625 */)
Dodavanje pozadine
Rezultirajući element skalira kako bi trebao, ali ako dodate pozadinsku sliku, rezultat neće biti baš dobar. Korištenje atributa veličina pozadine: korice. Nažalost, in Internet Explorer 8 ova metoda ne radi. Da bismo riješili ovaj problem, pozicioniramo pozadinu sa pozadinska pozicija. pozadinska slika mora biti barem toliko široka maksimalna širina element. U suprotnom, slika će biti izrezana.
Div.kolona ( /* The pozadinska slika mora biti široka 800px */ max-width: 800px; ) figure.fixedratio ( padding-top: 56,25%; /* 450px/800px = 0,5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ )
Recimo da imamo veliku pozadinsku sliku koja izgleda sjajno na desktopu. Ali dalje mobilni uređaj to će biti premalo, dakle ispravna odlukaće smanjiti širinu pozadine.
Na primjer, slika širine 800 x 200 piksela (4:1). mali ekran, na 300px širine, treba smanjiti na 150px (2:1). Hajde da izbrojimo atribute visina i padding top:
Na slici je prikazan omjer slike pozadine na različitim širinama. Nagib grafa (nagib) odgovara atributu padding top, početna visina - atribut visina. Rezultat je kod:
Div.column ( /* Pozadinska slika mora biti široka 800px */ max-width: 800px; ) figure.fluidratio ( padding-top: 10%; /* nagib */ visina: 120px; /* početna visina */ background- image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ )
Korištenje SCSS-a za izračunavanje
Atributi padding top i visina može se automatski izračunati pomoću pretprocesora kao što je SCSS. Primjer ovoga:/* Izračunajte omjer fluida na osnovu dvije dimenzije (širina/visina) */ @mixin omjer fluida ($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -mali: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height- velika - $visina-mala) / ($širina-velika - $širina-mala); $visina: $visina-mala - $širina-mala * $nagib; padding-top: $nagib * 100%; visina: $visina ; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Ovaj element će imati omjer fluida od 4:1 na 800px do 2:1 na 300px.*/ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); )
Web tehnologije, kao i različiti trendovi dizajna, ne miruju, pa se svaki put pojave neke originalne karakteristike i nijanse za web stranice. Jedan od ovih "smjera" je korištenje pozadine (backgorund), koja se proteže kako bi ispunila ekran po širini i visini. Rekao sam nešto prije otprilike godinu dana ili više - slika je postavljena u zaglavlje bloga i glatko "prešla" u glavnu boja pozadine web stranice. Možete čak dodati.
Postavljanje velike skalabilne slike kao pozadine je nešto novo i teže, čije sam rješenje pronašao u ovom članku.
Target ovu lekciju postavite pozadinsku sliku na web stranicu koja bi trajno prekrivala cijelu pozadinu prozora pretraživača. Šta tačno treba uraditi:
- ispunite cijelu stranicu jednom slikom bez razmaka;
- promjena veličine slike ako je potrebno (smanjenje prozora pretraživača);
- održavanje proporcija slike;
- pozicioniranje slike u centar stranice;
- nedostatak traka za pomicanje na stranici;
- cross-browser rješenje pogodno za različite pretraživače;
- implementacija bez ikakvih tehnologija trećih strana kao što je flash.
Dakle, postoji nekoliko odgovarajuća rješenja za pozadinu stranice na cijelom ekranu.
Divno, jednostavno i progresivno rješenje sa CSS3
Da bismo izvršili ovaj zadatak, možemo koristiti svojstvo background-size u CSS3. Koristićemo html element koji je bolji od tijela. Postavimo fiksnu i centriranu pozadinu, nakon čega ćemo koristiti vrijednost pozadinske veličine naslovnice.
| html ( background : url (images/bg.jpg ) centar bez ponavljanja fiksno središte ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: poklopac;) |
html (pozadina: url(images/bg.jpg) centar bez ponavljanja fiksno; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: poklopac;)
Rješenje podržavaju gotovo svi popularni na mreži:
- Firefox 3.6+ (Firefox 4 podržava verziju s prefiksom koji nije dobavljač)
- Opera 10+ (Opera 9.5 podržava veličinu pozadine, ali nema vrijednost naslovnice)
- Chrome Whatever+
- IE9+
- Safari 3+
Izvjesni Goltzman je pronašao rješenje koje omogućava haku da radi u IE
| filter : progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg" , sizingMethod= "scale") ; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")"; |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")";
Ali pažnja!!! ovo može uzrokovati određene probleme u radu linkova na stranici. Usput, nešto kasnije Matt Litherland je dodao da se kod, u principu, može koristiti, ali se ne može koristiti za ovo html elementi ili tijelo i trebate sve implementirati kroz div sa 100% visinom i širinom.
css- hak broj 1
Alternativnu verziju predstavlja Doug Neiner. U ovom slučaju se koristi element ugrađen u stranicu. , čija se veličina može promijeniti u bilo kojem pretraživaču. Postavite vrijednost minimalne visine koja podstiče prozor pretraživača da se ispuni okomito i postavite širinu na 100%, što stranicu ispunjava horizontalno. Također postavljamo minimalnu širinu tako da slika nikada ne bude manja nego što zapravo jeste.
| img.bg ( /* Postavi pravila za popunjavanje pozadine */ min-visina : 100% ; min-width : 1024px ; /* Postavite proporcionalno skaliranje */širina: 100% visina : auto ; /* Podešavanje pozicioniranja */ position : fixed ; vrh : 0 ; lijevo: 0 ) @media ekran i (maks. širina: 1024px) ( /* Specifično za ovu sliku */ img.bg ( lijevo : 50% ; margin-lijevo : -512px ; /* 50% */ ) ) |
img.bg ( /* Postavite pravila za popunjavanje pozadine */ min-visina: 100%; min-širina: 1024px; /* Postavite proporcionalno skaliranje */ širina: 100%; visina: auto; /* Postavite pozicioniranje */ pozicija: fiksna; vrh: 0; lijevo: 0; ) @medijski ekran i (maks. širina: 1024px) ( /* Specifično za ovu sliku */ img.bg ( lijevo: 50%; margin-left: -512px; /* pedeset% */ ) )
Radi u svim verzijama visokokvalitetnih pretraživača - Safari / Opera / Firefox i Chrome. Za IE, kao i uvijek, postoje neke nijanse:
- IE 9 - radi;
- IE 7/8 - najčešće radi ispravno, ali ne centrira slike manje od prozora pretraživača;
- IE 6 - može se prilagoditi, ali kome je ovaj pretraživač uopšte potreban.
css- hack opcija 2
Još jedan način rješavanja problema sa CSS stilovi je postavljanje inline slike na stranicu sa fiksnom pozicijom na lijevoj strani gornji ugao, zatim postavite min-width i min-height na 100% uz zadržavanje omjera širine i visine.
|
| #bg ( pozicija : fiksna ; gore : -50% ; lijevo : -50% ; širina : 200% ; visina : 200% ; ) #bg img ( pozicija : apsolutna ; vrh : 0 ; lijevo : 0 ; desno : 0 ; dno : 0 ; margina : auto ; min. širina : 50 % ; min. visina : 50 % ; ) |
#bg ( pozicija: fiksna; gore: -50%; lijevo: -50%; širina:200%; visina:200%; ) #bg img ( pozicija:apsolutna; gore:0; lijevo:0; desno:0; dno:0; margina:auto; min. širina:50%; min. visina:50%; )
Hak radi u:
- Safari / Chrome / Firefox (također rane verzije nije testirano, ali dobro radi u najnovijem)
- IE8+
- Opera (bilo koja verzija) i zajedno sa IE i jedni i drugi greše na isti način sa greškom u pozicioniranju.
Metoda sa jQuery
Ova opcija je mnogo lakša (u smislu CSS-a) ako znamo da je omjer slike (img se koristi kao pozadina) veći ili manji od trenutnog omjera širine i visine prozora pretraživača. Ako je manje, onda možemo koristiti samo širinu = 100%, a istovremeno će prozor biti jednako popunjen po širini i visini. Ako je više, možete odrediti samo visinu = 100% da popunite cijeli prozor.
Pristup svima podaci stižu putem JavaScripta, korišteni kodovi su sljedeći:
|
|
| #bg ( pozicija : fiksno ; gore : 0 ; lijevo : 0 ; ) .bgwidth ( širina : 100% ; ) .bgheight ( visina : 100% ; ) |
#bg ( pozicija: fiksna; gore: 0; lijevo: 0; ) .bgwidth ( širina: 100%; ) .bgheight (visina: 100%; )
| < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); }); |
$(window).load(function() (var theWindow = $(window), $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"); });
Po meni se u ovom slučaju ne vrši centriranje (koliko sam ja shvatio), ali se može. Većina desktop pretraživača je podržana, uključujući IE7+. Konačno, autor članka o hakovima pripremio je set primjera datoteka u kojima je sve to implementirano - možete ga preuzeti. Komentari na originalni članak također pružaju neke informacije i diskusiju, iako većinu važne detalje autor je dodao u obliku ažuriranja na post, a ja sam ga također preveo i naznačio. Naravno, primjeri će pomoći da se sve ovo razumije. Generalno, da nije bilo stalnih "gegova" iz IE7, svi navedeni hakovi bi bili savršeni.
P.S. Želite li kupiti knjigu? - nije potrebno ići u prodavnicu, jer vam sada online knjižara online omogućava da sve obavite preko mreže - birate, plaćate i dogovorite dostavu na kućnu adresu.
Rezolucija monitora je u stalnom porastu i pri postavljanju web stranica morate najviše voditi računa širok raspon dozvole. Ovo je posebno važno prilikom upotrebe pozadinska slika, koji je ili odsječen pri niskoj rezoluciji monitora, ili, obrnuto, ne odgovara u potpunosti na visoka rezolucija. Jedno rešenje slična situacija je skaliranje u pozadini. Naravno, ovo obećava neke probleme, kao što je pojava izobličenja i artefakata na slikama, ali također proširuje arsenal alata za raspored.
Svojstvo background-size kontroliše veličinu, možete navesti ključnu reč naslovnice kao vrednost, tada će veličina slike biti takva da se njena širina i visina uklapaju u navedeno područje (na primer, prozor veb stranice); ključna riječ contain skalira sliku tako da se barem jedna strana slike u potpunosti uklapa u navedeno područje. Osim toga, dozvoljeno je naznačiti eksplicitne dimenzije horizontalno ili vertikalno u postocima ili drugim css jedinice. Na sl. 1 prikazuje promjenu veličine slika kada različita značenja veličina pozadine. siva odabran je blok veličine 280x200 piksela unutar kojeg je postavljena pozadina.
Rice. 1. Izgled pozadinskih slika u zavisnosti od vrednosti veličine pozadine
Ako su navedene dvije vrijednosti veličine, odvojene razmakom, tada prva vrijednost određuje horizontalnu širinu, a druga vertikalnu. U ovom slučaju, proporcije se zanemaruju, što se jasno vidi na Sl. 1g Umjesto jedne od veličina, dozvoljeno je koristiti ključnu riječ auto , a zatim je pretraživač automatski izračunava na osnovu proporcija slike.
Primjer 1 setovi pozadinska fotografija, koji zauzima ceo prozor pretraživača.
Primjer 1. Pozadinska slika
Rezultat ovaj primjer prikazano na sl. 2. Prilikom promjene veličine prozora, fotografija će rasti ili se smanjiti kako bi ispunila cijelu web stranicu.
Rezolucija monitora stalno raste, a prilikom postavljanja web stranica morate voditi računa o najširem rasponu rezolucija. Ovo je posebno važno kada se koristi pozadinska slika koja je ili odsječena na niskoj rezoluciji monitora, ili, obrnuto, ne odgovara u potpunosti visokoj rezoluciji. Jedno rješenje za ovu situaciju je skaliranje pozadine. Naravno, ovo obećava neke probleme, kao što je pojava izobličenja i artefakata na slikama, ali također proširuje arsenal alata za raspored.
Svojstvo background-size je odgovorno za kontrolu veličine, ključna riječ naslovnice se može navesti kao vrijednost, tada će veličina slike biti takva da se njena širina i visina uklapaju u navedeno područje (na primjer, prozor web stranice); ključna riječ contain skalira sliku tako da se barem jedna strana slike u potpunosti uklapa u navedeno područje. Također je prihvatljivo specificirati eksplicitne horizontalne ili vertikalne dimenzije u procentima ili drugim CSS jedinicama. Na sl. Slika 1 prikazuje promjenu veličine slike s različitim vrijednostima veličine pozadine. Blok veličine 280x200 piksela je označen sivom bojom, unutar kojeg je postavljena pozadina.
Rice. 1. Izgled pozadinskih slika u zavisnosti od vrednosti veličine pozadine
Ako su navedene dvije vrijednosti veličine, odvojene razmakom, tada prva vrijednost određuje horizontalnu širinu, a druga vertikalnu. U ovom slučaju, proporcije se zanemaruju, što se jasno vidi na Sl. 1g Umjesto jedne od veličina, dozvoljeno je koristiti ključnu riječ auto , a zatim je pretraživač automatski izračunava na osnovu omjera slike.
Primjer 1 postavlja pozadinu koja zauzima cijeli prozor pretraživača. Da bih to uradio, morao sam da postavim visinu html-a i tela na 100%.
Primjer 1. Pozadinska slika
HTML5 CSS3 IE 9+ Cr Op Sa 5 Fx
Pozadina takođe uključuje gradijent, koji se takođe može skalirati, čime se dobijaju različiti efekti. Na primjer, dodavanjem veličine pozadine u linearni gradijent, učinit ćemo da se ponavlja, što formira naizmjenične gradijentne pruge (primjer 2).
Primjer 2 vertikalne pruge
Rezultat primjera prikazan je na sl. 2.
Rice. 2. Vertikalne gradijentne pruge
Vertikalne i horizontalne pruge mogu se napraviti ne samo s gradijentom, već i sa jasnim rubovima. Da biste to učinili, četiri boje moraju biti navedene u parametrima gradijenta - od 0 do 50% boje prve trake i od 50% do 100% boje druge trake. Prva boja sa 0% i zadnja boja sa 100% mogu se izostaviti, dodaju se automatski od strane pretraživača, tako da ćemo se ograničiti na samo dvije vrijednosti. Primjer 3 prikazuje stvaranje horizontalne pruge 50 piksela visoka.
Primjer 3: Horizontalne pruge
HTML5 CSS3 IE 10+ Cr Op Sa Fx
Rezultat ovog primjera prikazan je na sl. 3.
Rice. 3. Horizontalne pruge
Budući da možete dodati nekoliko pozadina u isto vrijeme, navodeći njihove parametre odvojene zarezima, isto se može učiniti i sa gradijentima. Samo jedna od boja mora biti poluprozirna, inače će se gradijenti međusobno preklapati. Primjer 4 koristi dva gradijenta koja se sijeku pod pravim uglom za pozadinu web stranice, koja u kombinaciji sa veličinom pozadine stvara ćelije.
Primjer 4: Dva gradijenta
HTML5 CSS3 IE Cr Op Sa Fx
Rezultat ovog primjera prikazan je na sl. četiri.
Rice. 4. Ćelije
Kombinacija gradijenta i svojstva veličine pozadine omogućava vam da dobijete široku paletu ispuna pozadine kreiranih bez upotrebe pozadinskih slika.
