Lyhyt tiedot
CSS-versiot
Arvot
url Arvo on polku grafiikkatiedostoon, joka on määritetty url()-rakenteen sisällä. Tiedoston polku voidaan kirjoittaa joko lainausmerkein (kaksois- tai yksittäinen) tai ilman niitä.none Poistaa elementin taustakuvan käytöstä.
HTML5 CSS2.1 IE Cr Op Sa Fx
taustakuva
Objekti malli
document.getElementById("elementID").style.backgroundImage
Selaimet
Internet Explorerin versiot 7.0:aan asti lisäävät taustan sellaisen elementin sisäreunaan, jolla on hasLayout-ominaisuus asetettu. Jos elementillä ei ole hasLayout-asetusta, taustakuva-ominaisuus noudattaa elementin rajoja määrittelyn mukaisesti. Näytön ero on havaittavissa, jos reunat ovat katkoviivoisia tai katkoviivaisia pikemminkin kuin yhtenäisiä.
Jos elementti on asetettu vieritykseen tai automaattiseen , Internet Explorer 8:ssa on yhden pikselin pystysuora viive, kun tausta rullaa.
none Poistaa elementin taustakuvan käytöstä.
| 1 | 2 | 3 |
), sitten Chrome, Safari, iOS näyttävät sen toisin kuin spesifikaatiossa, nimittäin jokaiselle solulle erikseen. Vaikka selaimen pitäisi näyttää kiinteää taustaa koko riville. Esimerkki 2 näyttää virheen osoittavan koodin.
Taustaa TR:lle
Tämän esimerkin tulos Chrome-selaimessa näkyy kuvassa. 1. Internet Explorer-, Opera- ja Firefox-selaimet näyttävät rivin taustan oikein (kuva 2).
Riisi. 1. Toista tausta jokaiselle solulle Riisi. 2. Koko rivin tausta
Kirjailijalta:
Hei kaikille. Taustaväreillä ja kuvilla on valtava rooli web-suunnittelussa, koska niiden avulla voit suunnitella elementtejä houkuttelevammin. Tänään tarkastelemme, kuinka tehdä tausta HTML-kielellä.
Onko mahdollista käyttää HTML:ää taustan asettamiseen?
Sanon heti, että ei. Yleensä html:ää ei luotu web-sivujen suunnitteluun. Se on vain erittäin epämukavaa. Esimerkiksi on olemassa attribuutti bgcolor, jolla voit asettaa taustavärin, mutta tämä on erittäin hankalaa.
Joten ensin sinun on päätettävä, mihin elementtiin haluat asettaa taustan. Eli meidän on löydettävä valitsin, johon kirjoitamme säännön. Jos esimerkiksi haluat asettaa taustan koko sivulle kokonaisuutena, voit tehdä tämän leipävalitsimella ja kaikille lohkoille div-valitsimella. No jne. Tausta voidaan ja pitäisi olla sidottu mihin tahansa muihin valitsimiin: tyyliluokkiin, tunnisteisiin jne.
Kun olet valinnut valinnan, sinun on kirjoitettava itse kiinteistön nimi. Jos haluat asettaa taustavärin (eli tasaisen värin, ei liukuvärin tai kuvan), käytä taustaväri-ominaisuutta. Sen jälkeen sinun on laitettava kaksoispiste ja kirjoitettava itse väri. Tämä voidaan tehdä eri tavoin. Esimerkiksi käyttämällä avainsanoja, hex-koodia, rgb-, rgba-, hsl-muotoja. Mikä tahansa menetelmä käy.
Yleisimmin käytetty menetelmä on heksadesimaalikoodi. Värien valitsemiseen voit käyttää ohjelmaa, joka näyttää värikoodin. Esimerkiksi photoshop, paint tai jokin verkkotyökalu. Siksi kirjoitan esimerkkinä yleisen taustan koko verkkosivulle.
runko( taustaväri: #D4E6B3; )
Tämä koodi on lisättävä pääosaan. On tärkeää, että tiedostot ovat samassa kansiossa.
Kuva taustana
Kuvassa käytän pientä html-kielen kuvaketta:
Luodaan tyhjä lohko tunnisteella:
< div id = "bg" > < / div > |
Annetaan sille selkeät mitat ja tausta:
#bg(leveys: 400px; korkeus: 250px; taustakuva: url(html.png); )
#bg( leveys: 400px; korkeus: 250px; taustakuva : url (html . png ); |
Tästä koodista näet, että käytin uutta ominaisuutta - background-image. Se on tarkoitettu erityisesti kuvan lisäämiseen taustaksi html-elementtiin. Katsotaan mitä tapahtui:
Voit määrittää kuvan kirjoittamalla avainsanan url kaksoispisteen jälkeen ja osoittamalla sitten tiedoston polun sulkeissa. Tässä tapauksessa polku määritetään sen perusteella, että kuva on samassa kansiossa kuin html-dokumentti. Sinun on myös määritettävä kuvan muoto.
Jos olet tehnyt tämän, eikä tausta vieläkään näy lohkossa, tarkista uudelleen, oletko kirjoittanut kuvan nimen oikein, onko polku ja pääte asetettu oikein. Nämä ovat yleisimpiä syitä, miksi tausta ei yksinkertaisesti näy, koska selain ei löydä kuvaa.
Mutta huomasitko yhden asian? Selain otti ja monisti kuvan koko lohkon ajan. Joten, vain tietääksesi, tämä on taustakuvien oletuskäyttäytyminen - niitä toistetaan pysty- ja vaakasuunnassa niin kauan kuin ne mahtuvat lohkoon. Tällä käytöksellä voit helposti hallita. Käytä tätä varten background-repeat-ominaisuutta, jolla on 4 pääarvoa:
Toista – oletusarvo, kuva toistetaan molemmilla puolilla;
Repeat-x – toistaa vain akselilla x;
Toista-y – toistaa vain y-akselia pitkin;
Ei toistoa – ei toista ollenkaan;
Voit kirjoittaa jokaisen arvon ja katsoa mitä tapahtuu. Kirjoitan sen näin:
background-repeat: toista-x;
tausta - toisto : toista - x ; |
Toista nyt vain vaakasuunnassa. Jos asetat toiston eston, kuvassa olisi vain yksi.
Hienoa, voimme lopettaa tähän, koska nämä ovat taustan kanssa työskentelyn perusominaisuudet, mutta näytän sinulle vielä kaksi ominaisuutta, joiden avulla voit saada enemmän hallintaa.
Toiston avulla taittosuunnittelijat pystyivät luomaan taustakuvioita ja liukuvärejä yhdellä pienellä kuvalla. Se voi olla 30 x 10 pikseliä tai jopa pienempi. Tai ehkä vähän enemmän. Kuva oli sellainen, että kun sitä toistettiin yhdeltä tai jopa molemmilta puolilta, siirtymiä ei näkynyt, joten tuloksena oli yksi saumaton tausta. Muuten, tätä lähestymistapaa kannattaa käyttää nyt, jos haluat käyttää saumatonta tekstuuria verkkosivustollasi taustana. Nykyään gradientti voidaan toteuttaa jo css3-menetelmillä, puhumme tästä varmasti myöhemmin.
Taustan sijainti
Oletuksena taustakuva, ellei sitä ole asetettu toistumaan, on sen lohkon vasemmassa yläkulmassa. Mutta sijaintia voidaan helposti muuttaa tausta-sijaintiominaisuuden avulla.
Voit asettaa sen eri tavoilla. Yksi vaihtoehto on yksinkertaisesti ilmoittaa sivut, joilla kuvan tulisi sijaita:
tausta-asento: oikea ylhäällä;
tausta - sijainti : oikea ylhäällä ; |
Eli pystysuunnassa kaikki pysyy ennallaan: taustakuva sijaitsee ylhäällä, mutta vaakasuunnassa muutimme sivua oikealle, eli oikealle. Toinen tapa asettaa sijainti on prosentteina. Tässä tapauksessa lähtölaskenta alkaa joka tapauksessa vasemmasta yläkulmasta. 100% - koko lohko. Siten kuvan sijoittamiseksi tarkalleen keskelle kirjoitamme sen seuraavasti:
tausta-asento: 50 % 50 %;
tausta-asento: 50 % 50 %; |
Muista yksi tärkeä asia sijoittelussa - ensimmäinen parametri on aina vaaka-asento ja toinen on pystyasento. Joten jos näet arvon 80% 20%, voit heti päätellä, että taustakuva siirtyy suuresti oikealle, mutta ei laske paljon.
Ja lopuksi voit määrittää sijainnin pikseleinä. Kaikki on sama, vain %:n sijaan tulee px. Joissakin tapauksissa tällainen sijoittelu voi olla tarpeen.
Pikakirjoitus
Hyväksy, että koodi osoittautuu melko hankalaksi, jos kaikki on asetettu niin kuin teimme. Osoittautuu, että kuvan polku on määritettävä, toisto ja sijainti. Toisto ja sijainti eivät tietenkään aina ole tarpeellisia, mutta joka tapauksessa olisi oikeampaa käyttää ominaisuuden lyhennettä. Se näyttää tältä:
tausta: #333 url(bg.jpg) ei toistoa 50 % 50 %;
tausta: #333 url(bg.jpg) ei toistoa 50 % 50 %; |
Eli ensimmäinen askel on tallentaa tarvittaessa yleinen yhtenäinen taustaväri. Sitten polku kuvaan, toistoon ja sijaintiin. Jos jotakin parametria ei tarvita, jätä se pois. Hyväksy, tämä on paljon nopeampaa ja kätevämpää, ja vähennämme myös koodiamme merkittävästi. Yleensä suosittelen, että kirjoitat aina lyhennetyssä muodossa, vaikka sinun tarvitsee vain ilmoittaa väri tai kuva.
Taustakuvan koon hallinta
Nykyinen kuvamme ei ole kovin hyvä seuraavan tempun esittelyyn, joten otan toisen. Olkoon se lohkon kokoinen tai suurempi. Kuvittele siis, että edessäsi on tehtävä taustakuvan tekeminen, jotta se ei täytä lohkoaan kokonaan. Ja esimerkiksi kuva on jopa suurempi kuin lohkon koko.
Mitä voit tehdä tässä tapauksessa? Tietysti yksinkertaisin ja järkevin vaihtoehto olisi yksinkertaisesti pienentää kuvaa, mutta se ei ole aina mahdollista tehdä. Oletetaan, että se on palvelimella ja tällä hetkellä ei ole aikaa tai mahdollisuutta pienentää sitä. Ongelma voidaan ratkaista background-size-ominaisuuden avulla, jota voidaan kutsua suhteellisen uudeksi ja jonka avulla voit manipuloida taustakuvan tai jopa minkä tahansa taustan kokoa.
Joten kuvani vie nyt kaiken tilan lohkossa, mutta annan sille taustakoon:
taustan koko: 80 % 50 %;
taustan koko: 80 % 50 %; |
Jälleen ensimmäinen parametri asettaa vaakakoon, toinen - pystykoko. Näemme, että kaikki sovellettiin oikein - valokuvasta tuli 80% lohkon leveydestä leveydestä ja puolet korkeudesta. Tässä sinun on vain tehtävä yksi selvennys - asettamalla koon prosentteina voit vaikuttaa kuvan mittasuhteisiin. Ole siis varovainen, jos et halua järkyttää mittasuhteita.
Kuten arvata saattaa, taustan koko voidaan määrittää myös pikseleinä. Voit myös käyttää kahta muuta avainsanaa:
Kansi – kuva skaalataan niin, että se ainakin toiselta puolelta täyttää lohkon kokonaan.
Contain – skaalaa sen niin, että kuva mahtuu kokonaan lohkoon sen maksimikoossa.
Näiden arvojen etuna on, että ne eivät muuta kuvan mittasuhteita, vaan ne pysyvät samoina.
Sinun tulisi myös ymmärtää, että kuvan venyttäminen voi johtaa sen laadun heikkenemiseen. Voin antaa esimerkin taittosuunnittelijoiden elämästä ja todellisesta käytännöstä. Kaikki tietävät ja ymmärtävät, että pöytäkoneille suunniteltaessa sivusto on mukautettava näyttöjen pääleveyksiin: 1280, 1366, 1920. Jos otat taustakuvan esimerkiksi 1280 x 200, etkä anna sille taustaa- kokoa, sitten leveämmät näytöt Näytölle tulee tyhjä tila, kuva ei täytä koko leveyttä.
99 %:ssa tapauksista tämä ei sovi web-kehittäjälle, joten hän asettaa background-size: cover niin, että kuva venyy aina ikkunan maksimileveydelle. Tämä on hyvä tekniikka, mutta nyt joudut kohtaamaan ongelman, että käyttäjät, joiden näytön leveys on 1920 pikseliä, saattavat nähdä huonomman kuvanlaadun.
Muistutan teitä, se venyy maksimileveyteensä. Näin ollen laatu heikkenee automaattisesti. Ainoa oikea ratkaisu tässä olisi aluksi käyttää suurempaa kuvaa – 1920 pikseliä leveä. Sitten leveimmillä näytöillä se on luonnollisessa koossa, ja muilla se yksinkertaisesti leikataan asteittain pois, mutta samaan aikaan, jos valitset taustakuvan oikein, tämä ei vaikuta sivuston ulkonäköön.
Yleisesti ottaen tämä on vain yksi esimerkki siitä, kuinka voit käyttää tässä artikkelissa hankkimaasi tietoa oikeiden asettelujen laatimisessa.
Läpinäkyvä tausta css:llä
Toinen css:n avulla toteutettavissa oleva ominaisuus on läpikuultava tausta. Eli tämän taustan kautta on mahdollista nähdä, mitä sen takana on.
Esimerkkinä asetan koko sivun taustaksi kuvalle, jota käytimme aiemmin esimerkeissä. Tunnisteella bg varustetulle lohkolle, jolla teemme kaikki kokeilumme, asetamme taustan käyttämällä rgba-väriasetusmuotoa.
Kuten aiemmin sanoin, CSS:ssä on monia muotoja värien asettamiseen. Yksi niistä on rgb, melko hyvin tunnettu muoto niille, jotka työskentelevät graafisissa muokkausohjelmissa. Se on kirjoitettu näin: rgb(17, 255, 34);
Ensimmäinen arvo suluissa on punaisen, sitten vihreän ja sitten sinisen kylläisyys. Arvo voi olla numeerinen välillä 0 - 255. Näin ollen rgba-muoto ei eroa, vain yksi parametri lisätään - alfa-kanava. Arvo voi olla 0-1, jossa 0 on täydellinen läpinäkyvyys.
Mielestäni ei ole yhtään sivustoa, jossa kiinteistöä ei käytetä CSS tausta. Vaikuttaa siltä, että mikä voisi olla yksinkertaisempaa kuin tämä ominaisuus? Mutta ei, sen ominaisuudet ovat paljon laajempia kuin tavallinen kuvan tai värin asettaminen sivun taustaksi. Jotkut asiat ovat tuttuja, kun taas toiset ovat luultavasti uusia. Joka tapauksessa on hyödyllistä tietää perusteellisesti, miten tausta toimii.
CSS3 toi kiinteistöön paljon uutta, kuten läpinäkyvyyden ja useiden kuvien asettamisen taustaksi, mutta tästä kerromme alla, mutta ensin tarkastellaan ominaisuuden perusteita tausta.
taustaväri
Olen enemmän kuin varma, että olet jo määrittänyt taustavärin useammin kuin kerran. Tämä voidaan tehdä useilla eri merkinnöillä: säännöllinen (värin nimeä käytetään), heksadesimaalinen tai RGB-merkintä. Jokainen tyyppi on samanlainen, käytä sitä, mikä sinulle parhaiten sopii. Yritän käyttää lyhintä vaihtoehtoa, ja helpomman havaitsemisen vuoksi tuloksena oleva tyylitiedosto on kooltaan hieman pienempi.
P (taustaväri: punainen;) p (taustaväri: #f00;) p (taustaväri: #ff0000;) p (taustaväri: rgb(255, 0, 0;))
CSS3 tukee läpinäkyvyyttä, joten voimme lisätä sen väriimme esimerkiksi näin:
P (taustaväri: rgba(255, 0, 0, 0,5);)
Viimeinen luku asetti läpinäkyvyydeksi 50 %. Voit asettaa läpinäkyvyyden arvoksi 0 (täysin läpinäkyvä tausta) 1:ksi (täysin läpinäkymätön).
taustakuva
Tätä ominaisuutta käytetään myös hyvin usein, sen avulla voit määrittää kuvan taustalle. CSS3 on lisännyt mahdollisuuden määrittää taustalle useita kuvia, joista jokainen luo oman kerroksen, joten jokainen seuraava on päällekkäinen edellisen kanssa. Miksi tästä voi olla hyötyä? Kaikki on melko yksinkertaista - oletetaan, että sinun täytyy ruuvata pieniä röyhelöitä sivuston jokaiseen nurkkaan. Koska asettelu on enemmän tai vähemmän kuminen, yhden kuvan käyttäminen ei ole vaihtoehto. Siksi teemme 4 "kerrosta", siirrämme jokaisen kuvan omaan nurkkaan ja siinä kaikki, ongelma on ratkaistu
Teksti (taustakuva: url("kuva1"), url("kuva2"), url("kuva3"))
Jos haluat määrittää yhden kuvan taustalle, jätämme koodiin vain ensimmäisen, mielestäni tämä on ymmärrettävää.
Kun käytät kuvia taustana, muista kaksi sääntöä:
- aseta kontrastivärinen taustaväri siltä varalta, että käyttäjä ei jostain syystä näe kuvaa. Se voi yksinkertaisesti sammuttaa kuvien näytön ja säästää liikennettä.
- Älä käytä taustakuvaa tärkeiden tietojen välittämiseen. Yllä mainituista syistä käyttäjä ei välttämättä näe sitä.
Useiden taustakuvien tuki on melko laaja. Kaikki selaimet, jopa IE8, tukevat tätä ominaisuutta.
Hei rakkaat blogisivuston lukijat. Tänään tarkastelemme viittä CSS-sääntöä, joiden avulla voit asettaa taustan mille tahansa HTML-elementille - taustan sijainti (kuva, toisto, väri, liite). Älkäämme myöskään unohtako mainita taustayhdistesääntöä.
Tässä ei ole mitään monimutkaista, mutta on olemassa tiettyjä hienouksia ja vivahteita, jotka sinun on tiedettävä valmiista mallista (muista, mikä auttaa paljastamaan minkä tahansa suunnittelun kaikki hyvät ja huonot puolet).
Muistutan vielä kerran, että tämä artikkeli on osa sarjaa ja tyylimerkintöjen tutkiminen olisi parasta aloittaa alusta, nimittäin artikkelilla siitä, mitä CSS on ja mihin sitä käytetään, ja jatkaa sitten annetussa järjestyksessä. hakuteoksessa. Vaikka joka tapauksessa se riippuu sinusta, mutta nyt puhutaan taustan asettamisesta.
Väri, taustaväri ja taustakuva
Katsotaanpa ensin, kuinka HTML-elementtien väri asetetaan käyttämällä Css-värisäännöt. Itse asiassa kaikki on täällä yksinkertaista. Syntaksi on täysin normaali ja voit asettaa värin sen mukaan, kuinka se tehtiin hypertekstin merkintäkielessä. Kuten muistat, sijoitetaan hash-merkin jälkeen (hash - "#fe35a3") tai käyttämällä kolmea numeroa, jos ensimmäinen vastaa toisen arvon, kolmas neljännen ja viides vastaavasti kuudennen ( värikoodi "#aa33ff" voidaan kirjoittaa lyhyesti "a3f").
Myös HTML- ja Css-koodin värit voidaan esittää sanojen muodossa (esimerkiksi "punainen"), mutta useimmiten käytetään heksadesimaalikoodia:
Väri: #303
Esimerkkinä värjäsin tämän pienen kappaleen samalla värillä kuin yllä (#303). Se on nyt hieman eri värinen kuin kaikki muut kappaleet (tummempi), jonka arvoksi on asetettu #555 käyttämäni WordPress-teeman CSS-tiedostossa. Mutta värin asettaminen värin avulla on melko yksinkertaista, mutta taustalla se on hieman monimutkaisempaa.
Niin, taustaa varten Css:ssä On viisi sääntöä, jotka voidaan haluttaessa yhdistää yhdeksi. Näet ne siirtymällä nykyiselle W3C-määrityssivulle ja etsimällä mitä tahansa sanalla Background:
- taustaväri - tällä säännöllä voit määrittää taustavärin mille tahansa HTML-elementille. Voit käyttää joko koodia tai sävyn nimeä, ts. kaikki on täsmälleen sama kuin värejä käytettäessä.
taustakuva - sen avulla voit käyttää kuvaa taustana (mutta muista lukea se, koska raskaat kuvat hidastavat sivujen lataamista), jonka polku ilmoitetaan url () -toiminnallisuudessa.
Jos katsot spesifikaatiota, näet sen taustan oletusväri mikä tahansa elementti on läpinäkyvä (säännön oletusarvo on "background-color:transparent"). Totta, elementeissä se ei ole oletuksena läpinäkyvä, koska Nämä ovat järjestelmäelementtejä ja kaikki niissä on erilaista ja erilaista kuin tavalliset hypertekstimerkintäkielen tunnisteet.
Taustavärin väri on asetettu vakioksi (kuusi tai kolme numeroa heksadesimaalikoodia tai sana):
Taustaväri: #FEFCDE
Esimerkiksi tämän kappaleen tausta määritetään käyttämällä taustaväriä ja värikoodia, joka on annettu juuri yllä.
Kaikki muut neljä CSS-sääntöä koskevat vain taustakuvaa, joka voidaan asettaa mille tahansa HTML-elementille ja haluttaessa sijoittaa tarkasti. Mitä grafiikkatiedostoa käytetään, voidaan määrittää käyttämällä taustakuva.
Jos tarkastelet sivunkuvauskielen määrityksiä, näet, että taustakuvan oletusarvo on "ei mitään" (eli kuvaa ei käytetä taustana). No, jos tarvitset edelleen tätä, url()-toiminnossa sinun on ilmoitettava polku siihen:
Background-image:url(https://site/image/comment_top_focus.gif);
Esimerkiksi tässä kappaleessa käytin graafista tiedostoa taustalla, jonka polku on kuvattu juuri yllä. Näet, että koko tälle kappaleelle varattu alue on peitetty toistuvalla kuvalla, joka alkuperäisessä näyttää tältä:
Ne. käytettäessä vain yhtä taustakuvasääntöä, joka osoittaa polun graafiseen tiedostoon, tämä sama kuva kerrotaan sekä pysty- että vaakasuunnassa, kunnes se kattaa koko tälle tietylle HTML-elementille verkkosivulla varatun alueen (esimerkissämme se oli kappale). Miksi näin tapahtuu?
Background-repeat - toista taustakuva
Kyllä, koska emme määrittäneet arvoa CSS-säännölle taustatoisto, mikä tarkoittaa, että sille käytetään oletusarvoa. Tarkastelemalla eritelmiä huomaamme, että tämä arvo vastaa "toista" (toista kuva kaikilla akseleilla). Vastaus tuli luonnollisesti.
Siksi taustatoistolla voimme hallita taustakuvan toistoja. Tällä säännöllä voi olla vain neljä merkitystä:
Background-position - taustapaikannus
Nyt herää kysymys: onko mahdollista siirtää taustakuvaa poispäin elementin kokoa rajoittavan alueen vasemmasta yläkulmasta. Tietysti voit, ja tätä tarkoitusta varten on erillinen sääntö. tausta-asento:
CSS-spesifikaatiota tarkasteltaessa käy selväksi, miksi taustakuva on oletusarvoisesti painettu täsmälleen HTML-elementtialueen vasempaan yläreunaan. Koska arvo "0% 0%" on taustan sijaintisäännön oletusarvo.
No, kun tätä sääntöä ei ole nimenomaisesti asetettu elementille (kuten meidän tapauksessamme), selain valitsee sen arvon, joka hyväksytään oletuksena määrittelyssä (huomaa, että CSS:n koordinaattiakselit raportoidaan tarkalleen vasemmasta yläreunasta alueelementistä).
Määrittelystä käy myös selväksi, että taustakuvan sijoittamiseen taustan sijainnin avulla voidaan käyttää sekä suhteellisia (prosentteja) että absoluuttisia arvoja (esim. ). No, voit myös käyttää sanoja, jotka vastaavat tiettyjä digitaalisia arvoja. Mutta ensin asiat ensin.
Kun asetat taustakuvan paikannusta käyttämällä absoluuttisia yksiköitä tausta-asemassa sen lopullisen sijainnin määrittämiseen käytetään seuraavaa periaatetta:
Ne. selain laskee määritetyt siirtymät X- ja Y-akselia pitkin sen alueen origosta, johon kohde on sijoitettu, itse tämän kuvan alkupisteeseen. Esimerkiksi tässä kappaleessa sijoitin taustakuvan taustan kautta käyttämällä seuraavia CSS-sääntöjä:
Background-image:url(https://site/image/logo.png); background-repeat:ei toistoa; taustan sijainti: 400px 25px;
Huomaa, että tässä tapauksessa se kohdistetaan katselualueen keskelle, ei näille kappaleille varatun alueen keskelle. On selvää, että todellisuudessa tällaista taustakuvan sijoittelua ei todennäköisesti käytetä.
Jos kuitenkin asetat kiinteän taustan sijainnin elementeille, kuten Body tai Html (eli tageissa, jotka kattavat koko verkkosivun), tämä kuva näkyy aina katseluportissa ja tämä on juuri CSS-taustaliitteen käyttö. kiinteistö nykyaikaisessa lohkoasettelussa.
Niitä on enemmän esivalmistettu sääntö Tausta, jonka avulla voit yhdistää kaikki viisi edellä kuvattua sääntöä yhteen pulloon. Lisäksi kaikkien viiden yhdistetyn version arvoja voidaan käyttää missä tahansa järjestyksessä ja missä tahansa määrässä (ne ovat ainutlaatuisia, eikä selain sekoita niitä keskenään). Selain olettaa oletusarvoksi kaiken, mitä et nimenomaisesti määritä.
Png) ei toistoa 50 %;
Esivalmistussääntöä sovelletaan tähän kappaleeseen selvyyden vuoksi. Siitä ei tullut kaunista, mutta se ei ole pääasia. Tässä kappaleessa käytetään outoa keltaista taustatäyttöä ja myös Liveinternet-logon kuvaa, joka on kohdistettu kappaleen keskelle. Koska Jos taustaliitesäännölle ei anneta arvoa, käytetään vieritysarvoa (oletusarvo).
Jos jollekin elementille haluat asettaa vain väritäytön etkä vaivaudu taustakuvaan, voit tehdä tämän sen sijaan:
Taustaväri: #FEFCDE
kirjoittaa:
Tausta: #FEFCDE
Koska kaikki muut tehdasvalmisteisen säännön arvot otetaan oletuksena, ja sitä tarvitsit.
Onnea sinulle! Nähdään pian blogisivuston sivuilla
Saatat olla kiinnostunut
Luettelotyyli (tyyppi, kuva, sijainti) - Css-säännöt luetteloiden ulkoasun mukauttamiseen HTML-koodissa Kuinka määrittää sivuston taulukkorivien, luetteloiden ja muiden HTML-elementtien vuorottelevat taustavärit käyttämällä n:nnen alatason pseudoluokkaa 
Sijainti (absoluuttinen, suhteellinen ja kiinteä) - tapoja sijoittaa HTML-elementtejä CSS:ssä (säännöt vasemmalle, oikealle, ylhäältä ja alhaalta) 
Float and clear CSS - lohkoasettelutyökalut 
Paikannus käyttämällä Z-indeksiä ja CSS-kohdistimen sääntöä hiiren kursorin vaihtamiseksi 
Täyte, marginaali ja reuna - aseta sisäinen ja ulkoinen täyte CSS:ssä sekä reunukset kaikille sivuille (ylä, ala, vasen, oikea) 
Näytä (esto, ei mitään, upotettu) CSS:ssä - aseta HTML-elementtien näyttötyyppi verkkosivulla 
Css:n prioriteetit ja niiden kasvu Tärkeä, valitsimien, käyttäjä- ja tekijätyylien yhdistäminen ja ryhmittely 
CSS - mikä se on, kuinka peräkkäiset tyylisivut yhdistetään HTML-koodiin tyylin ja linkin avulla 
Tunniste-, luokka-, tunnus- ja yleisvalitsimet sekä attribuuttien valitsimet nykyaikaisessa CSS:ssä
