lühike teave
CSS-i versioonid
Väärtused
url Väärtus on graafilise faili tee, mis on määratud konstruktsiooni url() sees. Faili tee saab kirjutada kas jutumärkides (kahe- või ühekordne) või ilma nendeta. none Keelab elemendi taustpildi. inherit Pärib vanema väärtuse.HTML5 CSS2.1 IE Cr Op Sa Fx
Objektimudel
document.getElementById("elementID ").style.backgroundImage
Brauserid
Internet Exploreri versioonid kuni 7.0 (kaasa arvatud) rakendavad atribuudi hasLayout määratud elemendi sisepiirile tausta. Kui elemendil puudub hasLayout , järgib taustapildi atribuut elemendi piire, nagu spetsifikatsioonis täpsustatud. Ekraani erinevus on märgatav, kui äärised on pigem katkendlikud või punktiirjooned, mitte ühtsed.
Kui elemendiks on seatud kerimine või automaatne , on Internet Explorer 8-l taustal kerimisel ühepiksline vertikaalne viivitus.
Internet Exploreri versioonid kuni 7.0 (kaasa arvatud) pärimisväärtust ei toeta.
Kui taust on seatud tabelireale (silt
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Selle näite tulemus Chrome'i brauseris on näidatud joonisel fig. 1. Internet Exploreri, Opera ja Firefoxi brauserid kuvavad rea tausta õigesti (joonis 2).
Riis. 1. Korrake tausta iga lahtri jaoks
Riis. 2. Kogu rea taust
Ja siin jõuame peamise asjani, parafraseerime seda: "Sait algab taustast." Enamik blogijaid teeb "klassikalisi ajaveebe" valge taustaga, kuid me läheme teist teed. Mööduge imelisest kinnistust CSS-i taustpilt, me lihtsalt ei saa.
Mida see teeb? See vara CSS-i taustpilt lisab pildi taustaks erinevatesse elementidesse HTML- lehed. See ei piirdu ainult sildiga keha ja seda kasutatakse laialdaselt veebisaitide kujundamisel, näiteks: div, li, p, tabel, päis, jalus.
Vaatame näidet:
Veebilehe kujundamine algab taustast.
Õige oleks määrata tausta värv – omadus taustavärv, turvavõrguna, kui pilti ei laadita. Sulgudes url() märkige piltidega kausta tee.
Vaikimisi kordub pilt nagu "paan", kuni see täidab kogu brauseri ekraani; kui liigume lehel allapoole, täidab meie "paan" nii teise kui ka kolmanda ekraani, kuni lehe sisu saab otsa. . Selge on see, et selline tulemus ei ole kujundusliku mõtte kõrgpunkt ja meil ei tule “vannituba”, vaid lihtsalt blogi, kus loetavus on väga oluline punkt.
Lihtne võimalus plaadilisusest vabanemiseks on kasutada suurt, vähemalt 1024 px laiust pilti, nii et see täidaks kogu ekraani. Samuti oleks hea lahendus leida õmblusteta tekstuur, korrutades näeb muster välja nagu üks tervik.
Kuidas tausta atraktiivsemaks muuta?
Jumal tänatud, et meil on selleks abilisi:
- ei-korda- keelake kordus
- korda-x– mustri kordamine ainult horisontaalselt
- korda-y– mustri kordamine ainult vertikaalselt
Näiteks:
Blogi päis
See on taustatekstuur, mis kordub ainult horisontaalselt.
Järgmine abimees - vara tausta-positsioon, võimaldab teil asetada taustpildi kõikjal ekraanil. See tehnika on kaasaegses veebidisainis laialt levinud. Meil on pilt, kuid see ei ole sisu osa, vaid on ainult saidi kaunistuseks.
Pealkiri
Näide etteantud positsioneerimisega mittekorduvast taustast.
Pilti kuvatakse ainult üks kord ja see asub paremal.
Parempoolse serva taane on seatud 200 px, et vältida teksti kokkupõrget taustaga.
Kui tahame, et pilt oleks ekraani alla kerimisel alati nähtav, peame ülalolevale koodile lisama atribuudi - tausta-manus: fikseeritud;
Mis vahet on img Ja taustapilt?
Erinevus on põhimõtteline, tag img sisestatakse otse kehasse HTML-leht ja vastutab sisu eest (illustratsioonid, fotod, avatarid), kannab semantilist koormust. On väga oluline, et pilt oleks otsingumootorite poolt indekseeritud ja lisatud otsingutulemustesse. Omadused CSS-i taustpilt– muutke sait ainulaadseks ja ilusaks, see tähendab, et see on kujundus, mis tuleks üle kanda välisesse faili CSS stiilid või kasutamine elemendi sees stiilis.
See muidugi ei tähenda seda taustapilt kehasse asetamisel ei tööta HTML- lehed. Aga soovitan tungivalt kõike disainiga seonduvat arvesse võtta CSS. Selle tulemusena saame puhta HTML-kood:
- sellel on positiivne mõju saidi indekseerimisele; otsingurobotid armastavad teie saiti ja külastavad seda sagedamini.
- ka teie külastajad on rahul, sait laaditakse tänu oma kergele kaalule kiiremini.
- Veebihaldurina on teil lihtsam puhta koodiga töötada.
Noh, oleme kaalunud enam-vähem kõiki kinnisvara kasutamise võimalusi CSS-i taustpilt. Rohkem trennisõpru! Kopeerige julgelt kood ja mõelge välja oma variatsioonid!
lühike teave
CSS-i versioonid
Väärtused
url Väärtus on graafilise faili tee, mis on määratud konstruktsiooni url() sees. Faili tee saab kirjutada kas jutumärkides (kahe- või ühekordne) või ilma nendeta. none Keelab elemendi taustpildi. inherit Pärib vanema väärtuse.HTML5 CSS2.1 IE Cr Op Sa Fx
Objektimudel
document.getElementById("elementID ").style.backgroundImage
Brauserid
Internet Exploreri versioonid kuni 7.0 (kaasa arvatud) rakendavad atribuudi hasLayout määratud elemendi sisepiirile tausta. Kui elemendil puudub hasLayout , järgib taustapildi atribuut elemendi piire, nagu spetsifikatsioonis täpsustatud. Ekraani erinevus on märgatav, kui äärised on pigem katkendlikud või punktiirjooned, mitte ühtsed.
Kui elemendiks on seatud kerimine või automaatne , on Internet Explorer 8-l taustal kerimisel ühepiksline vertikaalne viivitus.
Internet Exploreri versioonid kuni 7.0 (kaasa arvatud) pärimisväärtust ei toeta.
Kui taust on seatud tabelireale (silt
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Selle näite tulemus Chrome'i brauseris on näidatud joonisel fig. 1. Internet Exploreri, Opera ja Firefoxi brauserid kuvavad rea tausta õigesti (joonis 2).
Riis. 1. Korrake tausta iga lahtri jaoks
Riis. 2. Kogu rea taust
Ma arvan, et pole ühtegi kohta, kus kinnisvara ei kasutata CSS-i taust. Näib, et mis võiks olla lihtsam kui see vara? Aga ei, selle võimalused on palju laiemad kui tavaline pildi või värvi määramine lehe taustaks. Mõned asjad on tuttavad, teised aga ilmselt paljudele uued. Igal juhul on kasulik põhjalikult teada, kuidas taust töötab.
CSS3 tõi kinnisvarasse palju uut, nagu läbipaistvus ja mitme pildi taustaks määramine, kuid sellest räägime allpool, kuid kõigepealt vaatame vara põhitõdesid taustal.
taustavärv
Olen enam kui kindel, et olete taustavärvi juba mitu korda määranud. Seda saab teha mitut tüüpi tähistusega: tavaline (kasutatakse värvinime), kuueteistkümnendsüsteem või RGB-tähistus. Iga tüüp on samaväärne, kasutage seda, mis teile rohkem meeldib. Üritan kasutada kõige lühemat varianti ja lihtsamaks tajumiseks on tulemuseks olev stiilifail veidi väiksem.
P (taustavärv: punane;) p (taustavärv: #f00;) p (taustavärv: #ff0000;) p (taustavärv: rgb(255, 0, 0;))
CSS3 toetab läbipaistvust, nii et saame selle oma värvile lisada, näiteks järgmiselt:
P (taustavärv: rgba(255, 0, 0, 0,5);)
Viimane arv määras läbipaistvuseks 50%. Saate määrata läbipaistvuse väärtuse vahemikus 0 (täiesti läbipaistev taust) kuni 1 (täiesti läbipaistmatu).
taustapilt
Seda omadust kasutatakse ka väga sageli, see võimaldab teil taustale pildi määrata. CSS3 on lisanud võimaluse määrata taustale mitu pilti, millest igaüks loob oma kihi, nii et iga järgmine kattub eelmisega. Miks see võib kasulik olla? Kõik on üsna lihtne – oletame, et peate saidi igasse nurka kruvima väikesed volangid. Arvestades enam-vähem kummist paigutust, ei ole ühe pildi kasutamine võimalik. Seetõttu teeme 4 kihti, liigutame iga pildi oma nurka ja ongi kõik, probleem on lahendatud
Keha (taustapilt: url("pilt1"), url("pilt2"), url("pilt3"))
Kui teil on vaja taustale määrata üks pilt, jätame koodi ainult esimese, ma arvan, et see on arusaadav.
Piltide taustana kasutamisel peaksite meeles pidama kahte reeglit:
- määrake kontrastne taustavärv juhuks, kui kasutaja pilti mingil põhjusel ei näe. See võib liiklust säästes lihtsalt piltide kuvamise välja lülitada.
- Ärge kasutage olulise teabe edastamiseks taustapilti. Eespool nimetatud põhjustel ei pruugi kasutaja seda näha.
Mitme taustpildi tugi on üsna ulatuslik. Kõik brauserid, isegi IE8, toetavad seda atribuuti.
taustapilt:
Kirjeldus
taustapildi omadus(inglise keelest "taustapilt" ‒ "taustapilt") määrab elemendi taustapildi.
Märge
Taustapildi määramisel tuleks määrata ka taustavärv, mida kasutatakse juhul, kui pilt pole saadaval. Kui pilt on saadaval, kuvatakse see taustavärvi kohal. (Nii on värv nähtav pildi läbipaistvates osades).
Kasutustingimused
Kuna CSS3 (komadega eraldatud), saate korraga määrata mitu taustapilti. See muudab alumised taustpildid nähtavaks ülemiste taustpiltide läbipaistvate alade kaudu.
JavaScript
[objekt].style.backgroundImage="[väärtus]";
Brauseri tugi
Spetsifikatsioon
Väärtused
Kõik väärtused CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
Puudub Näitab, et taustpilti pole. url(
taustapilt: url(minupilt.png);
URL("
background-image: url("myImage.png");
Pärimine Määrab, et element pärib oma emaelemendi sätted.
Algne väärtus:"mitte ükski".
Kasutusnäide
Koodide loend
Taustapilt
Mitme taustapildiga dokument.