taustapilt: | puudub; taustapilt: | mitte ühtegi | pärida; taustapilt: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | mitte ühtegi

Kirjeldus

Taustapildi omadus(inglise keelest "background image" - "background image") määrab elemendi taustapildi.

Märge

Taustapildi määramisel peaksite määrama ka taustavärvi, mida kasutatakse, kui pilt pole saadaval. Kui pilt on saadaval, kuvatakse see taustavärvi kohal. (Nii on värv nähtav pildi läbipaistvates osades).

Kasutustingimused

Alates CSS3 -st (komadega eraldatud) saate korraga määrata mitu taustapilti. See muudab alumised taustpildid ülemiste taustpiltide läbipaistvate alade kaudu nähtavaks.

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 Tähistab taustpilti. url ( ) Määrab pildi URI stringi "url (...)" sees.

taustapilt: url (myImage.png);

URL (" ") Määrab pildi URI stringi" url (...) "sees ja URI stringi tähistatakse DOUBLE QUOTE" "" tähemärkidega.

taustapilt: url ("myImage.png");

Pärida Näitab, et element peaks pärima emaelemendi parameetrid.

Algne väärtus:"Mitte ühtegi".

Kasutamise näide

Koodide loetelu

Taustapilt

Dokument, millel on mitu taustapilti.

> Taustapildi omadus>

Veebisaidi kujundamine algab taustast.

Taustvärvi - omadus - määramine on õige taustavärv, turvavõrgu jaoks, kui pilti ei laadita. Sulgudes url () määrake piltidega kausta tee.

Vaikimisi kordub pilt nagu "paan", kuni see täidab kogu brauseri ekraani, kuna lehel alla liikudes täidab meie "paan" nii teise kui ka kolmanda ekraani, nii kaua kui lehe sisu lõpeb . On selge, et selline tulemus ei ole disainiidee kõrgus ja meil ei tule "vannituba", vaid lihtsalt ajaveeb, kus loetavus on väga oluline punkt.

Lihtne võimalus "plaatimisest" vabanemiseks on kasutada suurt, vähemalt 1024 px laiust pilti, nii et see täidaks kogu ekraani. Samuti on see hea lahendus õmblusteta tekstuuri leidmiseks, korrutades on pilt üks tervik.

Kuidas muuta tausta atraktiivsemaks?

Jumal tänatud, et meil on selleks abilised:

• ei-korda- keela kordus
• kordus-x- mustri kordamine ainult horisontaalselt
• kordan-y- mustri kordamine ainult vertikaalselt

Näiteks:

Blogi päis

See on taustatekstuur, mis kordub ainult horisontaalselt.

Järgmine abimees on vara tausta-asend, võimaldab taustapilti paigutada ekraanile suvalisse kohta. See tehnika on kaasaegses veebidisainis laialt levinud. Meil on pilt, kuid see ei ole osa sisust, vaid toimib ainult saidi kaunistuseks.

Suund

Näide korduva tausta kohta antud positsioneerimisega.

Pilt kuvatakse ainult üks kord ja asub paremal.

Tausta paremast servast on seatud 200 px, et vältida teksti kokkupõrget taustaga.

Kui tahame, et pilt oleks ekraanil allapoole kerides alati nähtav, peame atribuudi ülaltoodud koodile lisama - taust-kinnitus: fikseeritud;

Mis vahe on img ja taustapilt?

Erinevus on põhimõtteline, silt img sisestatakse otse kehasse Html-leheküljed ja vastutab sisu eest (illustratsioonid, fotod, avatarid), kannab semantilist koormust. On väga oluline, et pilt oleks otsingumootorite poolt indekseeritud ja jõuaks otsingutulemustesse. Omadused CSS-taustapilt- muuta sait ainulaadseks ja ilusaks, see tähendab see disain, mis tuleks välisele failile välja viia CSS stiile või kasutada elemendi sees stiil.

See muidugi ei tähenda seda taustapilt kehasse pannes ei tööta Html-lehed. Kuid soovitan tungivalt kõik disainiga seonduv välja võtta CSS... Selle tulemusel saame puhtaks 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 väikesele kaalule kiiremini.
• teil on veebimeistrina lihtsam puhta koodiga töötada.

Noh, oleme kaalunud enam -vähem kõiki kinnisvara kasutavaid võimalusi CSS-taustapilt... Rohkem harjutussõpru! Kopeerige julgelt kood ja pakkuge välja oma valikud!

lühike info

CSS versioonid

Väärtused

url Väärtus on graafilise faili tee, mis on määratud ehitise url () sees. Sellisel juhul võib faili tee kirjutada kas jutumärkides (kahe- või ühekordsed) või ilma nendeta. none Tühistab elemendi taustapildi. pärib väärtuse vanemalt.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objekti mudel

document.getElementById ("elementID") .style.backgroundImage

Brauserid

Internet Explorer 7.0 või uuem versioon rakendab elemendi äärise siseküljele tausta, mille atribuut hasLayout on seatud. Kui elemendil pole hasLayouti, järgib atribuut taustapilt elemendi piire vastavalt spetsifikatsioonile. Ekraani erinevus on märgatav, kui piirid on kriipsu või punktiiriga, mitte ühtlased.

Kui element on seatud kerimiseks või automaatseks, on Internet Explorer 8 tausta kerimisel ühepiksline vertikaalne viivitus.

Internet Explorer kuni versioonini 7.0 (kaasa arvatud) ei toeta pärimisväärtust.

Kui taust on määratud tabelireale (silt ), siis Chrome, Safari, iOS ei kuva seda spetsifikatsioonis ettenähtud viisil, nimelt iga lahtri jaoks eraldi. Arvestades, et brauser peaks kogu rea jaoks näitama kindlat tausta. Näide 2 näitab koodi vea näitamiseks.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Selle näite tulemus Chrome'i brauseris on näidatud joonisel fig. 1. Brauser Internet Explorer, Opera ja Firefox kuvavad rea tausta õigesti (joonis 2).

Riis. 1. Iga lahtri tausta kordamine

Riis. 2. Kogu rea taust

lühike info

CSS versioonid

Väärtused

url Väärtus on graafilise faili tee, mis on määratud ehitise url () sees. Sellisel juhul võib faili tee kirjutada kas jutumärkides (kahe- või ühekordsed) või ilma nendeta. none Tühistab elemendi taustapildi. pärib väärtuse vanemalt.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objekti mudel

document.getElementById ("elementID") .style.backgroundImage

Brauserid

Internet Explorer 7.0 või uuem versioon rakendab elemendi äärise siseküljele tausta, mille atribuut hasLayout on seatud. Kui elemendil pole hasLayouti, järgib atribuut taustapilt elemendi piire vastavalt spetsifikatsioonile. Ekraani erinevus on märgatav, kui piirid on kriipsu või punktiiriga, mitte ühtlased.

Kui element on seatud kerimiseks või automaatseks, on Internet Explorer 8 tausta kerimisel ühepiksline vertikaalne viivitus.

Internet Explorer kuni versioonini 7.0 (kaasa arvatud) ei toeta pärimisväärtust.

Kui taust on määratud tabelireale (silt ), siis Chrome, Safari, iOS ei kuva seda spetsifikatsioonis ettenähtud viisil, nimelt iga lahtri jaoks eraldi. Arvestades, et brauser peaks kogu rea jaoks näitama kindlat tausta. Näide 2 näitab koodi vea näitamiseks.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Selle näite tulemus Chrome'i brauseris on näidatud joonisel fig. 1. Brauser Internet Explorer, Opera ja Firefox kuvavad rea tausta õigesti (joonis 2).

Riis. 1. Iga lahtri tausta kordamine

Riis. 2. Kogu rea taust

Ma arvan, et pole ühtegi saiti, kus seda vara ei kasutataks CSS -i taust... Tundub, mis võiks olla lihtsam kui see vara? Aga ei, selle võimalused on palju laiemad kui pildi või värvi tavaline eesmärk lehe taustana. Midagi on tuttav, kuid millestki saab kindlasti paljude jaoks uudsus. Igal juhul on kasulik põhjalikult teada, kuidas taust töötab.

CSS3 on toonud kinnistule palju uusi asju, see on läbipaistvus ja mitme pildi taustaks määramine, kuid sellest räägime allpool ja kõigepealt vaatame vara põhitõdesid. taust.

taustavärv

Olen üsna kindel, et olete teinud taustavärvi ülesandeid mitu korda. Seda saab teha mitut liiki märkega: tavaline (kasutatakse värvinime), kuueteistkümnend- või RGB -märge. Iga tüüp on võrdne, kasutage seda, mis teile kõige rohkem meeldib. Püüan kasutada kõige lühemat versiooni ja taju jaoks on see lihtsam ja stiilifail on 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 saate selle lisada ka meie värvile järgmiselt.

P (taustavärv: rgba (255, 0, 0, 0,5);)

Viimaseks numbriks määrati 50% läbipaistvus. Saate määrata läbipaistvuse väärtuseks 0 (täiesti läbipaistev taust) kuni 1 (täiesti läbipaistmatu).

taustapilt

Seda omadust kasutatakse ka väga sageli, see võimaldab taustale pildi määrata. CSS3 lisab võimaluse taustale määrata mitu pilti, millest igaüks loob omamoodi kihi, nii et iga järgnev paigutatakse eelmisele. Miks see võib kasulik olla? Kõik on üsna lihtne - oletame, et peate kruvima saidi igas nurgas olevad väikesed nupud. Enam -vähem sujuva paigutuse pakkumine ei ole ühe pildi kasutamine valik. 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 peate taustale määrama ühe pildi, jätame koodi ainult esimese, arvan, et see on arusaadav.
Mis tahes pildi taustana kasutamisel tuleb meeles pidada kahte reeglit:

• määrake kontrastset taustavärvi juhuks, kui kasutaja ei saa mingil põhjusel pilti kuvada. See võib piltide kuvamise välja lülitada, säästes liiklust.
• ärge kasutage olulise teabe edastamiseks taustapilti. Ülaltoodud põhjusel ei pruugi kasutaja seda näha.

Mitme taustpildi tugi on piisavalt lai. Kõik brauserid, isegi IE8, toetavad seda atribuuti.