Niquelao » Blogiarkisto » Useita taustakuvia CSS 3:lla

» Blogiarkisto » Useita taustakuvia CSS 3:lla Niquelao Useita taustakuvia CSS 3:lla 25. marraskuuta 2009, kirjoittanut Rumoroso Yksi CSS 3:n tuomista uudistuksista (joka on minun puolestani tervetullut) on mahdollisuus lisätä useita taustakuvia samaan elementtiin ( http://www.w3.org/TR/css3-background/#layering ). Tähän asti, jos halusimme yhdistää useamman kuin yhden kuvan taustaksi, ainoa keino oli käyttää joitakin sivullamme olevia elementtejä ja soveltaa taustaa kuhunkin niistä halutun lopputuloksen saavuttamiseksi.

Joskus jopa käytimme ylimääräistä merkintää, mikä heikensi sivuston laatua lisäämällä merkintää pelkästään esitystarkoituksiin. Mutta nyt asia muuttuu… CSS 3:n ansiosta, jos haluamme käyttää kahta tai useampaa taustakuvaa, voimme lisätä background-image-ominaisuuteen kunkin kuvan polun erottamalla ne pilkuilla. Esimerkiksi: background-image: url(‘fondo1.png’), url(‘fondo2.png’) Näin yksinkertaisella tavalla olemme määritelleet tarvittavan, jotta elementillä, johon sen sovellamme, on molemmat kuvat taustanaan.

Tietysti tästä eteenpäin herää uusia kysymyksiä… menevätkö ne päällekkäin? voiko ne sijoittaa eri paikkoihin? voiko toista toistaa yhdellä akselilla ja estää toisen toistumisen? … …ja kaikkiin niihin vastaus on KYLLÄ . Mitä päällekkäisyyteen tulee, ensimmäinen ilmoitettu kuva sijoitetaan lähimmäksi käyttäjää . Sen jälkeen ja sen taakse sijoitetaan seuraava (näyttöön nähden kohtisuoralla akselilla), sitten seuraava ja niin edelleen viimeiseen asti, joka sijoitetaan kaikkien taakse.

On kuin jokainen kuva sijoitettaisiin omaan tasoonsa . Jos lisäksi ilmoitamme taustavärin, se asetetaan kaikkien käytettyjen kuvien taakse. Mitä muihin kysymyksiin tulee, voin yleistää vastauksen, sillä ne kaikki heräsivät ajatellessamme ominaisuuksia, joita tavallisesti käytämme, eli taustakuvan sijaintia ( background-position ), käyttäytymistä vieritettäessä ( background-attachment ) ja toistoa ( background-repeat ).

Jos haluamme, että kullakin kuvalla on tietty arvo, meidän on vain ilmoitettava ne peräkkäin pilkuilla erotettuina (kuten teimme ilmoittaessamme itse kuvat). Esimerkiksi: background-image: url(‘fondo1.png’), url(‘fondo2.png’), url(‘fondo3.png’); background-position: 0 0, 150px 200px, left center; background-repeat: no-repeat, repeat-x, no-repeat; Tällä ilmoitamme kolme kuvaa taustaksi: ensimmäinen sijoitetaan vasempaan yläkulmaan, toinen siirtyy 150px oikealle ja 200px alas ja kolmas sijoitetaan myös vasemmalle ja keskitetään pystysuunnassa.

Mitä toistoon tulee, ensimmäinen ja viimeinen eivät toistu ja toinen toistuu vaaka-akselilla. Mutta tähän aihe ei lopu. Meille, jotka pidämme koodin optimoinnista (ja meidän kaikkien pitäisi), jotkin ilmoitukset voidaan lyhentää: background-position: 0 0, 150px 200px, left center; muuttuu muotoon: background-position: 0 0, 150px 200px, left; Sana center poistetaan. Kuten kaikki tiedämme (tai meidän pitäisi tietää), kun yhtä taustan sijainnin arvoa ei ilmoiteta, oletusarvoksi tulee keskitetty ( center ), tässä tapauksessa pystysuunnassa. background-repeat: no-repeat, repeat-x, no-repeat; muuttuu muotoon: background-repeat: no-repeat, repeat-x; Kolmas arvo voidaan poistaa.

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Syynä on se, että kun arvoja puuttuu, jo ilmoitettujen arvojen luettelo toistetaan, kunnes niitä on yksi kutakin kuvaa kohden (siksi, jos arvojen luettelo alkaa uudelleen, ensimmäinen on no-repeat ). Mutta vielä voidaan optimoida enemmän hyödyntämällä shorthand-ominaisuutta background: : background: url(‘fondo1.png’) 0 0 no-repeat, url(‘fondo2.png’) 150px 200px repeat-x, url(‘fondo3.png’) left no-repeat; Kuten huomaatte, kaikki tämä avaa mahdollisuuksien kirjon suunnitteluillemme.

Jotkin selaimet alkavat nykyisissä versioissaan tukea useita taustakuvia. Niiden joukossa ovat Firefox (versiosta 3.6 alkaen), Chrome , Safari ja Konqueror . Jos käytätte jotakin niistä, voitte nähdä tuloksen esimerkissä, jonka olen valmistellut . Valitettavasti Internet Explorer ei vielä tue tätä (saapa nähdä, sisällyttävätkö he sen tulevaan versioonsa 9) eikä Opera.

Seuraavaksi liitän mukaan kuvakaappauksen siitä, mitä esimerkissä näytetään, kun tuki on olemassa (jos käytte sivulla selaimella, jossa ei ole tukea, näette vain katkoviivaisen reunan): Edellä mainitun lisäksi CSS 3 sisältää myös uusia arvoja joillekin mainituille ominaisuuksille sekä uusia ominaisuuksia, jotka antavat suunnitteluillemme suurta monipuolisuutta. Käsittelen niitä yksityiskohtaisesti tulevassa artikkelissa. Alkupalaksi mainitsen background-size … kyllä, se on juuri sitä, mitä ajattelette! huomautus: Oletan, että artikkelin teknisen sisällön lisäksi houkuttelevinta on kuvassa oleva kakku .

Worth a look: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

No, herättääkseni hieman kateutta kerron, että kuva on minun ottamani ja se on Doloresin minulle valmistama hedelmäkakku… On selvää, että hänkin hallitsee esityksen hallinnan, mutta lisäksi vakuutan teille, että hän hallitsee sisällönhallinnan, sillä se oli herkullinen… Useita taustakuvia CSS 3:lla Kategoria: CSS —> 4 kommenttia Useita taustakuvia CSS 3:lla 26. marraskuuta 2009 […] nyt asia muuttuu… Useita taustakuvia CSS 3:lla […] Tweets that mention Niquelao » Blogiarkisto » Useita taustakuvia CSS3:lla — Topsy.com 27. marraskuuta 2009 […] This post was mentioned on Twitter by Jorge Rumoroso, Juanjo Fernández.

Juanjo Fernández said: RT @rumoroso: #niquelao Useita taustakuvia CSS 3:lla http://bit.ly/4YqcJ2 #CSS3 […] Niquelao » Blogiarkisto » CSS 3: Taustan ominaisuudet 2. joulukuuta 2009 […] tuki selainten uusimmissa versioissa (kuten jo mainitsin merkinnässä Useita taustakuvia CSS 3:lla), sisältyen joissakin tapauksissa kokeellisesti (esimerkiksi Firefoxissa etuliitteen avulla […] Niquelao » Blogiarkisto » Lisää CSS 3:sta: background-origin ja background-clip 13. joulukuuta 2009 […] kuten selitin toisessa artikkelissa, CSS 3:lla voimme sisällyttää useamman kuin yhden taustakuvan.

Ominaisuudet background-origin ja background-clip sallivat yhden arvon sisällyttämisen kutakin […] Voit seurata kommentteja RSS 2.0 -syötteen kautta . Voit myös lähettää trackbackin sivustoltasi. Edellinen artikkeli: Toinen tyylikäs lisäys CSS-kurssiin Seuraava artikkeli: CSS 3: Taustan ominaisuudet —> —> —> Tämä teos on lisensoitu Creative Commons -lisenssillä .

P.S. A few readers have asked which software de testing we actually reach for — it's Deque axe DevTools Pro; take a look here if you want the current details.