Taustakuvan koon hallinta css:n avulla. Responsiiviset taustakuvat

Näyttöjen resoluutio kasvaa jatkuvasti ja web-sivuja asetettaessa on otettava huomioon mahdollisimman laaja resoluutio. Tämä on erityisen tärkeää käytettäessä taustakuvaa, joka on joko leikattu alhaisilla näytön tarkkuudella tai päinvastoin, se ei sovi täysin korkeaan resoluutioon. Yksi ratkaisu tähän tilanteeseen on skaalata tausta. Tämä tietysti lupaa ongelmia, kuten vääristymien ja artefaktien esiintymistä kuvissa, mutta se myös laajentaa asettelutyökalujen arsenaalia.

Kokoa säätelee background-size-ominaisuus, voit määrittää arvoksi kansiavainsanan, jolloin kuvan koko on sellainen, että sen leveys ja korkeus mahtuvat määritetylle alueelle (esimerkiksi verkkosivun ikkunaan); Sisältö-avainsana skaalaa kuvan niin, että ainakin yksi kuvan puoli sopii kokonaan annetulle alueelle. Lisäksi on hyväksyttävää määrittää selkeät vaaka- tai pystymitat prosentteina tai muina CSS-yksiköinä. Kuvassa Kuva 1 näyttää kuvien koon muuttamisen erilaisilla taustakoon arvoilla. 280x200 pikselin kokoinen lohko on korostettu harmaalla, jonka sisäpuolelle asetetaan tausta.

Riisi. 1. Taustakuvien näkymä taustakoon arvon mukaan

Jos määritetään kaksi mitta-arvoa välilyönnillä erotettuina, ensimmäinen arvo määrittää vaakasuuntaisen leveyden ja toinen pystysuoran. Tässä tapauksessa mittasuhteet jätetään huomioimatta, mikä näkyy selvästi kuvassa. 1d. Yhden mitan sijasta on sallittua käyttää automaattista avainsanaa, jolloin selain laskee sen automaattisesti kuvan kuvasuhteen perusteella.

Esimerkki 1 määrittää taustakuvan, joka kattaa koko selainikkunan.

Esimerkki 1. Taustakuva

Tämän esimerkin tulos on esitetty kuvassa. 2. Kun ikkunan kokoa muutetaan, valokuva lähentyy tai loitontaa täyttämään koko verkkosivun.

Käännös: Vlad Merževitš

CSS 2.1:ssä säilöön lisätty taustakuva säilyttää kiinteät mitat. Onneksi CSS3 otti käyttöön background-size-ominaisuuden, jolla taustaa voidaan venyttää tai kutistaa. Se on täydellinen, jos olet luomassa reagoivaa web-suunnittelumallia.

Koon määrittämiseen on useita tapoja - katso taustakoon esittelysivua.

Absoluuttinen koon muuttaminen

Mittayksikköjä voidaan käyttää.

Taustan koko: leveys korkeus;

Oletusarvoisesti leveys ja korkeus on asetettu automaattisiksi, mikä jättää kuvan alkuperäiset mitat.

Voit asettaa kuvalle uuden koon absoluuttisilla yksiköillä, kuten px, em, cm jne. Mittasuhteet muuttuvat tarvittaessa. Jos taustakuvamme mitat ovat esimerkiksi 200 × 200 pikseliä, seuraava koodi jättää tämän korkeuden, mutta tekee leveydestä puolet kooltaan:

Taustan koko: 100px 200px;

Jos vain yksi arvo on määritetty, sen katsotaan olevan leveys. Korkeus on asetettu automaattisesti ja mittasuhteet säilyvät:

Taustan koko: 100 pikseliä; / * samanlainen * / taustan koko: 100px auto;

Tämä koodi skaalaa kuvan 200 x 200 pikselistä 100 x 100 pikseliin.

Suhteellinen koon muuttaminen prosentteina

Jos prosenttiosuuksia käytetään, mitat perustuvat nimikkeeseen, EI kuvaan:

Taustan koko: 50 % auto;

Taustakuvan leveys riippuu siis säiliön mitoista. Jos säiliön leveys on 500 pikseliä, kuvamme koko pienennetään 250 x 250:een.

Prosenttiosuuksien käyttäminen voi olla hyödyllistä responsiivisissa malleissa. Muuta esittelysivun leveyttä ymmärtääksesi, miten mitat muuttuvat.

Skaalaus maksimikokoon

Back-size-ominaisuus ymmärtää myös include-avainsanan. Se skaalaa kuvan täyttämään säiliön. Toisin sanoen kuva kasvaa tai kutistuu suhteessa, mutta leveys ja korkeus eivät ylitä säiliön mittoja:

Taustan koko: sisältää;

Täytä taustalla

Back-size-ominaisuus ymmärtää myös cover-avainsanan. Kuva skaalataan täyttämään koko säiliö, mutta jos kuvasuhteet ovat erilaiset, kuva rajataan.

Taustan koko: kansi;

Useiden taustojen skaalaus

Useita taustoja voidaan skaalata pilkuilla erotetulla arvoluettelolla samassa järjestyksessä.

Tausta: url ("sheep.png") 60 % 90 % ei toistoa, url ("sheep.png") 40 % 50 % ei toistoa, url ("sheep.png") 10 % 20 % ei toistoa # 393; taustakoko: 240px 210px, automaattinen, 150px;

Työskentely selaimissa

Kaikkien selainten uusimmat versiot tukevat taustakokoa ilman etuliitteitä.

IE8 ja aiemmat eivät tue tätä ominaisuutta. Voit käyttää IE-suodatinta jäljittelemään sisältöä ja kansiarvoja, mutta et voi muuttaa taustakuvan kokoa ilman pientä temppua, kuten lisäämällä oikea kuva muiden elementtien taakse. Se on sotkuinen, joten suosittelen siroa huononemista.

Näyttöjen resoluutio kasvaa jatkuvasti ja web-sivuja asetettaessa on otettava huomioon mahdollisimman laaja resoluutio. Tämä on erityisen tärkeää käytettäessä taustakuvaa, joka on joko leikattu alhaisilla näytön tarkkuudella tai päinvastoin, se ei sovi täysin korkeaan resoluutioon. Yksi ratkaisu tähän tilanteeseen on skaalata tausta. Tämä tietysti lupaa ongelmia, kuten vääristymien ja artefaktien esiintymistä kuvissa, mutta se myös laajentaa asettelutyökalujen arsenaalia.

Ominaisuus background-size vastaa koon hallinnasta, kansiavainsana voidaan määrittää arvoksi, jolloin kuvan koko on sellainen, että sen leveys ja korkeus mahtuvat määritetylle alueelle (esimerkiksi verkkosivun ikkunaan); Sisältö-avainsana skaalaa kuvan niin, että ainakin yksi kuvan puoli sopii kokonaan annetulle alueelle. Lisäksi on hyväksyttävää määrittää selkeät vaaka- tai pystymitat prosentteina tai muina CSS-yksiköinä. Kuvassa Kuva 1 näyttää kuvien koon muuttamisen erilaisilla taustakoon arvoilla. 280x200 pikselin kokoinen lohko on korostettu harmaalla, jonka sisäpuolelle asetetaan tausta.

Riisi. 1. Taustakuvien näkymä taustakoon arvon mukaan

Jos määritetään kaksi mitta-arvoa välilyönnillä erotettuina, ensimmäinen arvo määrittää vaakasuuntaisen leveyden ja toinen pystysuoran. Tässä tapauksessa mittasuhteet jätetään huomioimatta, mikä näkyy selvästi kuvassa. 1d. Yhden mitan sijasta on sallittua käyttää automaattista avainsanaa, jolloin selain laskee sen automaattisesti kuvan kuvasuhteen perusteella.

Esimerkki 1 määrittää taustakuvan, joka kattaa koko selainikkunan. Tätä varten minun piti asettaa html ja kehon korkeus 100%.

Esimerkki 1. Taustakuva

HTML5 CSS3 IE 9+ Cr Op Sa 5 Fx

Taustalla on myös gradientti, jota voidaan myös skaalata, jolloin saadaan erilaisia ​​tehosteita. Esimerkiksi lisäämällä taustan koko lineaariseen gradienttiin, saamme sen toistumaan, mikä muodostaa vuorottelevia gradienttiraitoja (esimerkki 2).

Esimerkki 2. Pystyraidat

Esimerkin tulos näkyy kuvassa. 2.

Riisi. 2. Pystysuorat liukuviivat

Pysty- ja vaakasuorat raidat voidaan tehdä paitsi kaltevuudella, myös selkeillä reunoilla. Tätä varten sinun on määritettävä gradienttiparametreissa neljä väriä - 0 - 50% ensimmäisen nauhan väri ja 50% - 100% toisen nauhan väri. Ensimmäistä väriä 0% ja viimeistä väriä 100% ei tarvitse kirjoittaa, selain lisää ne automaattisesti, joten rajoitamme vain kahteen arvoon. Esimerkki 3 luo vaakasuoria raitoja, joiden korkeus on 50 pikseliä.

Esimerkki 3. Vaakasuorat raidat

HTML5 CSS3 IE 10+ Cr Op Sa Fx

Tämän esimerkin tulos on esitetty kuvassa. 3.

Riisi. 3. Vaakasuorat raidat

Koska voit lisätä useita taustoja samanaikaisesti ja luetella niiden parametrit pilkuilla eroteltuina, sama voidaan tehdä liukuvärien kanssa. Vain yksi väreistä saa olla puoliksi läpinäkyvä, muuten liukuvärit menevät päällekkäin. Esimerkki 4 soveltaa verkkosivun taustalle kahta suorassa kulmassa leikkaavaa gradienttia, mikä yhdessä taustan koon kanssa muodostaa soluja.

Esimerkki 4. Kaksi gradienttia

HTML5 CSS3 IE Cr Op Sa Fx

Tämän esimerkin tulos on esitetty kuvassa. 4.

Riisi. 4. Solut

Liukuvärin ja taustan kokoominaisuuden yhdistelmä mahdollistaa laajan valikoiman taustatäyttöjä, jotka on luotu ilman taustakuvia.

Verkkoteknologiat, kuten erilaiset suunnittelutrendit, eivät pysy paikallaan, joten joka kerta sivustoille on joitain alkuperäisiä siruja ja vivahteita. Yksi näistä "suunnista" on taustan (backgorund) käyttö, joka ulottuu koko näytön leveyteen ja korkeuteen. Jotain niin kuin sanoin noin vuosi sitten tai enemmänkin - kuva laitettiin blogin otsikkoon ja "siirtyi" sujuvasti web-sivun päätaustaväriin. Voit jopa lisätä sen, jos haluat.

Suuren skaalautuvan kuvan sijoittaminen taustaksi on jotain uutta ja vaikeampaa, ja löysin siihen ratkaisun tästä artikkelista.

Tämän oppitunnin tarkoituksena on sijoittaa sivustolle taustakuva, joka peittää pysyvästi koko selainikkunan taustan. Mitä tarkalleen ottaen pitää tehdä:

• täytä koko sivu yhdellä kuvalla ilman välilyöntejä;
• kuvan koon muuttaminen tarvittaessa (selainikkunan pienentäminen);
• kuvan kuvasuhteen säilyttäminen;
• kuvan sijoittaminen sivun keskelle;
• vierityspalkkien puute sivulla;
• monille selaimille sopiva ratkaisu;
• käyttöönotto ilman kolmannen osapuolen flash-tekniikoita.

Sivuston taustalle koko näytön tilassa on siis useita sopivia ratkaisuja kerralla.

Upea, yksinkertainen ja edistyksellinen ratkaisu CSS3:lla

Tämän tehtävän suorittamiseksi voimme käyttää CSS3:n background-size-ominaisuutta. Käytämme parempaa html-elementtiä kuin body. Asetetaan kiinteä ja keskitetty tausta, jonka jälkeen käytämme tausta-koon kansiarvoa.

html (tausta: url (images / bg.jpg) ei toistoa keskellä; -webkit-background-size: kansi; -moz-background-size: kansi; -o-background-size: kansi; taustan koko: peite;)

Ratkaisua tukevat lähes kaikki verkossa suositut:

• Firefox 3.6+ (Firefox 4 tukee ei-toimittajan etuliitettä)
• Opera 10+ (Opera 9.5 tukee taustakokoa, mutta ei kansiarvoa)
• Chrome Whatever +
• IE 9+
• Safari 3+

Tietty Goltzman löysi ratkaisun, jonka avulla hakkerointi toimii IE:ssä

suodatin: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = ". myBackground.jpg", sizingMethod = "skaala"); -ms-filter: "progid: DXImageTransform.Microsoft.AlphaImageLoader (src =" myBackground.jpg ", sizingMethod =" asteikko ")";

Mutta huomio!!! tässä tapauksessa sivun linkkien toiminnassa voi olla ongelmia. Muuten, hieman myöhemmin Matt Litherland lisäsi, että koodia voidaan periaatteessa käyttää, mutta tähän ei voi käyttää html- tai body-elementtejä, vaan kaikki on toteutettava divin kautta, jonka korkeus ja leveys on 100%.

CSS-hakkerointi numero 1

Vaihtoehtoisen version esittää Doug Neiner. Tässä tapauksessa käytetään sivulle rakennettua elementtiä. jonka kokoa voi muuttaa missä tahansa selaimessa. Asetamme vähimmäiskorkeuden täyttämään selainikkunan pystysuunnassa ja asetimme leveydeksi 100 % täyttääksesi sivun vaakasuunnassa. Asetamme myös minimileveyden, jotta kuva ei koskaan ole pienempi kuin se todellisuudessa on.

img.bg (/ * Aseta säännöt taustan täyttämiseksi * / min-korkeus: 100 %; min-leveys: 1024 kuvapistettä; / * Määritä suhteellinen skaalaus * / leveys: 100 %; korkeus: automaattinen; / * Aseta paikannus * / sijainti: kiinteä; ylhäällä: 0; vasen: 0;) @medianäyttö ja (enimmäisleveys: 1024px) (/ * Erityisesti tälle kuvalle * / img.bg (vasen: 50%; marginaali vasen: -512px; /* 50 % */ ) )

Toimii kaikissa korkealaatuisten selaimien versioissa - Safari / Opera / Firefox ja Chrome. Kuten aina, IE:llä on omat vivahteensa:

• IE 9 - toimii;
• IE 7/8 - Useimmiten toimii oikein, mutta ei keskitä kuvia vähemmän kuin selainikkuna;
• IE 6 on muokattavissa, mutta kuka todella tarvitsee tätä selainta.

CSS-hakkerointivaihtoehto 2

Toinen vaihtoehto ongelman ratkaisemiseksi CSS-tyyleillä on sijoittaa sivulle upotettu kuva kiinteästi vasempaan yläkulmaan ja asettaa sitten minimileveydeksi ja minimikorkeudeksi 100 % kuvasuhdetta säilyttäen.

#bg (sijainti: kiinteä; yläosa: -50%; vasen: -50%; leveys: 200%; korkeus: 200%;) #bg img (sijainti: absoluuttinen; ylhäällä: 0; vasen: 0; oikea: 0; pohja: 0; marginaali: automaattinen; min-leveys: 50%; min-korkeus: 50%;)

Hakkerointi toimii:

• Safari / Chrome / Firefox (liian aikaisia ​​versioita ei testattu, mutta toimii hyvin jälkimmäisessä)
• IE 8+
• Opera (mikä tahansa versio) ja yhdessä IE:n kanssa molemmat bugiset samalla paikannusvirheellä.

Menetelmä jQuerylla

Tämä vaihtoehto on paljon helpompi (CSS:n näkökulmasta katsottuna), jos tiedämme, että kuvan kuvasuhde (taustana käytetään kuvaa) on suurempi tai pienempi kuin selainikkunan nykyinen kuvasuhde. Jos se on pienempi, voimme käyttää vain leveyttä = 100% ja samalla ikkuna täytetään tasaisesti leveydeltä ja korkeudelta. Jos enemmän - voit määrittää vain korkeuden = 100 % täyttääksesi koko ikkunan.

Kaikkeen tietoon päästään JavaScriptin kautta, koodeja käytetään seuraavasti:

#bg (sijainti: kiinteä; ylhäällä: 0; vasen: 0;) .bgwidth (leveys: 100%;) .bgheight (korkeus: 100%;)

$ (ikkuna) .load (funktio () (var theWindow = $ (ikkuna), $ bg = $ ("# bg"), aspectRatio = $ bg.width () / $ bg.height (); funktio resizeBg () (if ((TheWindow.width () / theWindow.height ()))< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Käsittääkseni keskitystä ei tässä tapauksessa tehdä (sikäli kuin ymmärrän), mutta se voidaan tehdä. Useimmat työpöytäselaimet ovat tuettuja, mukaan lukien IE7+. Lopuksi hakkeroimista käsittelevän artikkelin kirjoittaja valmisteli joukon esimerkkitiedostoja, joissa kaikki tämä on toteutettu - voit ladata sen. Alkuperäisen artikkelin kommentit sisältävät myös tietoa ja keskustelua, vaikka kirjoittaja lisäsi suurimman osan tärkeistä yksityiskohdista päivitysten muodossa julkaisuun, ja olen myös kääntänyt ja osoittanut. Tietenkin esimerkit auttavat ymmärtämään kaiken tämän. Yleensä kaikki mainitut hakkerit olisivat täydellisiä, elleivät IE7:n jatkuvat "vaikeudet".

P.S. Haluatko ostaa kirjan? - kauppaan ei tarvitse mennä, koska nyt verkkokirjakaupassa voit tehdä kaiken verkon kautta - valita, maksaa ja järjestää kotiinkuljetuksen.