CSS on lyhenne sanoista Cascading Style Sheets. Se on yksinkertainen mutta tehokas suunnittelukieli, jolla on kyky muuttaa verkkosivuja. Yksinkertaisesti sanottuna se virtaviivaistaa prosessia, jolla verkkosivut tehdään esitettäviksi ja houkutteleviksi käyttäjille . Tässä artikkelissa ymmärrämme, kuinka erilaiset taustakuvat voidaan ottaa käyttöön CSS: ssä seuraavassa järjestyksessä:
- Taustakuva CSS-ominaisuuksissa
- Taustakuva CSS: ssä
- Toista tausta
- Taustaliite
- Taustan sijainti
- Taustakuva CSS-koossa
- Taustaväri
Taustakuva CSS-ominaisuuksissa
On monia ominaisuuksia, joita käytetään kuvan käyttäytymisen ja paikannuksen hallintaan. Nämä ominaisuudet ovat:
- taustakuva
- tausta-toisto
- tausta-kiinnitys
- taustan sijainti
- taustakoko
- taustaväri
Tutustumme näihin ominaisuuksiin ja näemme milloin ja miten niitä käytetään mielenkiintoisella esittelyllä.
Taustakuva CSS: ssä
taustakuva ominaisuutta, kuten nimestä voi päätellä, käytetään yksinkertaisesti osoittamaan ja asettamaan taustakuva verkkosivun elementin kautta. Oletuksena taustakuva sijoitetaan elementin vasempaan yläkulmaan.
syntaksi: taustakuva: url | ei mitään | lineaarinen gradientti | radiaalinen gradientti
body {taustakuva: url ('apple.jpg')}tausta käyttäen URL-osoitetta
Ymmärretään parametrit:
- URL: Tämän parametrin syötteen avulla voimme määrittää joko tiedostopolun mille tahansa kuvalle tai kuvan URL-osoitteen, joka on asetettava taustaksi. Useamman kuin yhden kuvan ilmoittamiseksi URL-osoitteet erotetaan pilkulla.
body {taustakuva: url ('apple.jpg')} 
- ei mitään: Tämä on ominaisuuden oletusarvo, eikä taustakuvaa renderöidä, jos sen arvo on määritetty.
body {background: none}- lineaarinen gradientti (): Taustakuva asetetaan lineaariselle gradientille. Tälle ominaisuudelle on määritettävä vähintään vähintään kaksi väriä, ts. Ylhäältä alas.
runko {taustaväri: # 001 taustakuva: lineaarinen kaltevuus (valkoinen 15%, läpinäkyvä 16%), lineaarinen kaltevuus (valkoinen 15%, läpinäkyvä 16%) taustakoko: 60 kuvapistettä 60 kuvapistettä taustakuva: 0 0, 30 kuvapistettä 30 kuvapistettä}- säteittäinen gradientti (): Taustakuva on asetettu säteittäiseen kaltevuuteen. Tälle ominaisuudelle, ts. Keskeltä reunoille, on määritettävä vähintään vähintään kaksi väriä.
runko {taustaväri: # 001 taustakuva: säteittäinen kaltevuus (valkoinen 15%, läpinäkyvä 16%), säteen suuntainen kaltevuus (valkoinen 15%, läpinäkyvä 16%) taustakoko: 60 kuvapistettä 60 kuvapistettä taustan sijainti: 0 0, 30 kuvapistettä 30 kuvapistettä}- toistuva-lineaarinen-gradientti (): Se toistaa lineaarisen gradientin. Käytetään samaa esimerkkiä, jonka näimme edellä lineaarisessa gradientissa toistuvalle lineaariselle gradientille ja näemme eron.
body {background-color: # 001 background-image: toistuva lineaarinen gradientti (valkoinen 15%, läpinäkyvä 16%), toistuva lineaarinen gradientti (valkoinen 15%, läpinäkyvä 16%) taustakoko: 60 kuvapistettä 60 kuvapistettä taustakuva : 0 0, 30 kuvapistettä 30 kuvapistettä}- toistuva säteittäinen gradientti (): Se toistaa säteittäisen kaltevuuden. Tutkitaan samaa esimerkkiä, jota käytimme edellä säteen suuntaisena.
body {background-color: # 001 background-image: toistuva säteittäinen gradientti (valkoinen 15%, läpinäkyvä 16%), toistuva säteittäinen gradientti (valkoinen 15%, läpinäkyvä 16%) taustakoko: 60px 60px tausta-asema : 0 0, 30 kuvapistettä 30 kuvapistettä}Varalla oleva tausta
On aina suositeltavaa lisätä ammattivihjeeksi taustaväri varavaihtoehtona. Se tulee pelastamaan varsinkin, kun joko taustakuvat eivät lataudu tai kehittämäsi gradienttitausta ei tue joitain vanhoja selaimia, joissa sitä katsellaan.
Tämä ei pilaa käyttökokemusta ja voidaan julistaa näin:
body {tausta: url (apple_lost.jpg) vaaleanpunainen}Useita taustoja
Meillä on myös mahdollisuus asettaa useita taustakuvia, ja sitä vaaditaan useimmissa tapauksissa, kuten etualalla ja taustakuvana. Kuvan järjestys on tässä tärkeä, etupuolella olevan kuvan ilmoitetaan ensimmäisenä ja takana viimeisen kuvan seuraavaksi.
Alla on esimerkki useista taustakuvista:
body {taustakuva: url ('pieni sydän.jpg'), url ('tausta.jpg')}Toista tausta
Tausta-toisto-ominaisuutta käytetään yhdessä taustakuvan kanssa kuvan toistokäyttäytymisen määrittämiseksi. Se määrittää, toistetaanko taustakuva ja miten. Oletuksena taustakuva toistetaan sekä pysty- että vaakasuunnassa.
Mahdolliset arvot ovat:
- toista- Kuva toistuu sekä vaaka- että pystysuunnassa
- no-repeat - Kuva ei toistu
- repeat-x - Kuva toistetaan vaakasuunnassa
- Repeat-y - Kuva toistetaan pystysuunnassa
- välilyönti- Kuva toistetaan tasaisilla välilyönneillä tai aukoilla.
- pyöreä - Kuva toistetaan täyttämään alue ilman aukkoja niiden välillä.
CSS-syntaksin tausta-toisto-ominaisuudelle on:
taustatoisto: toista | toista-x | toista-y | ei-toista | välilyönti | pyöreä
body {background-image: url ('heart.png'), url ('background.png') background-repeat: toista-y, toista-x taustaväri: #ffffff}Taustaliite
tausta-kiinnitys ominaisuutta käytetään yhdessä taustakuvan kanssa ilmoittamaan, pitäisikö kuvan vierittää sisällön vierityksen aikana. Se tarkoittaa, että taustakuvan tulee olla kiinteä tai sen tulisi vierittää asiakirjan mukana selainikkunanäkymään nähden. Oletusarvo on vieritys.
Mahdolliset arvot ovat:
transformaation tyyppi informatiikassa
- vieritys - Kuva vierittää sivua.
- kiinteä - Kuva ei vierity sivun mukana
CSS-syntaksin taustaliite on:
taustaliite: vieritä | kiinteä
body {background-image: url ('heart.png'), url ('background.png') background-repeat: välilyönti, pyöreä}Taustan sijainti
taustan sijainti Ominaisuutta käytetään osoittamaan taustakuvan sijainti tai sijainti. Mahdolliset arvot ovat:
- alkuun
- oikein
- pohjassa
- vasemmalle
- keskusta
- näiden arvojen yhdistelmä (esim. vasen yläosa)
CSS-syntaksin tausta-sijainti on:
taustan sijainti: ylhäältä | oikea | vasen | alhaalta | keskeltä
body {taustakuva: url ('heart.png') tausta-toisto: ei-toista taustaliite: vieritä}Taustakuva CSS-koossa
Tämä ominaisuus on yksi hyödyllisimmistä, koska sen avulla voimme hallita taustakuvan kokoa. Tällä ominaisuudella voimme käyttää erilaisia yhdistelmiä ja saada tuloksia vastaavasti. Oletusarvo on auto.
Seuraavia arvoja voidaan käyttää taustakoon kanssa:
- auto
- kuvan pituus - korkeus ja leveys, esim. 20px 40px.
- prosenttiosuus - kuvan korkeus ja leveys prosentteina w.r.t emoelementistä, esim. 50% 50%.
- keskitä- Kohdista kuva keskelle
- skaalaa kuva peittämään se kokonaan taustalla.
- sisältää kuvan skaalaamalla sen todelliseen korkeuteen ja leveyteen asti.
CSS-syntaksin tausta-sijainti on:
taustakoko: arvo
body {background-image: url ('heart.png'), url ('background.png') background-repeat: ei-toisto, toista taustakoko: 400px 150px, kansi}body {taustakuva: url ('heart.png'), url ('background.png') tausta-toisto: ei-toisto, toista taustakoko: sisältää, 400 kuvapistettä 150 kuvapistettä}Taustaväri
Tämä on yksinkertaisin kaikista CSS: n ominaisuuksista. Se käyttää yksivärisiä sivun taustaa. Tämän ominaisuuden arvo voidaan määrittää väreillä (esim. Punainen, sininen jne.), Heksadesimaaliarvolla ja RGB-arvolla.
CSS-syntaksin taustaväri on:
taustaväri: arvo
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Tämä päättää kaikki ominaisuudet, joita voimme käyttää taustalla. Voimme aina kokeilla erilaisia ominaisuuksien yhdistelmiä, kuten näimme esityksessämme.
CSS on välttämätöntä, ja sen on hankittava taitoja jokaiselle käyttöliittymän web-kehittäjälle. Se auttaa suunnittelemalla ja muotoilemalla taustaa sekä rakentamaan vaikuttavia verkkosivustoja ja rikastamaan käyttökokemusta. Parasta on jatkaa kokeilua ja hyödyntää täysin tätä erityistä käyttöliittymätekniikkaa, koska se voi tehdä ihmeitä ja muuttaa sivua dynaamisesti.
Katso meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus antaa sinulle taitoja työskennellä back-end- ja front-end-verkkoteknologioiden kanssa. Se sisältää koulutusta verkkokehityksestä, jQuerystä, Angularista, NodeJS: stä, ExpressJS: stä ja MongoDB: stä.
Onko sinulla kysymys meille? Mainitse se 'Taustakuva CSS: ssä' -blogin kommenttiosassa ja palaamme sinuun.