fona attēls: | nav; fona attēls: | neviens | mantot; fona attēls: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | neviens

Apraksts

Fona attēla īpašums(no angļu valodas "fona attēls" - "fona attēls") iestata elementa fona attēlu.

Piezīme

Iestatot fona attēlu, jānorāda arī fona krāsa, kas tiks izmantota, ja attēls nav pieejams. Ja attēls ir pieejams, tas tiek parādīts virs fona krāsas. (Tādā veidā krāsa būs redzama attēla caurspīdīgajās daļās).

Lietošanas noteikumi

Sākot ar CSS3 (atdalot ar komatiem), varat norādīt vairākus fona attēlus vienlaikus. Tādējādi apakšējie fona attēli būs redzami caur augšējo fona attēlu caurspīdīgajām zonām.

JavaScript

[objekts] .stils .backgroundImage = "[vērtība]";

Pārlūkprogrammas atbalsts

Specifikācija

Vērtības

Visas vērtības CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3

Nav Norāda, ka nav fona attēla. url ( ) Norāda attēla URI virkni iekš "url (...)".

fona attēls: url (myImage.png);

URL (" ") Norāda attēla URI virkni" url (...) ", un URI virkne tiek apzīmēta ar DOUBLE QUOTE" "" rakstzīmēm.

fona attēls: url ("myImage.png");

Pārmantot Norāda, ka elementam vajadzētu mantot vecāka elementa parametrus.

Sākotnējā vērtība:"Nav".

Lietošanas piemērs

Kodu saraksts

Fona attēls

Dokuments ar vairākiem fona attēliem.

> Fona attēla īpašums>

Vietnes dizains sākas ar fonu.

Būs pareizi noteikt fona krāsu - īpašumu fona krāsa, drošības tīklam, ja attēls netiek ielādēts. Iekavās url () norādiet ceļu uz mapi ar attēliem.

Pēc noklusējuma attēls atkārtosies kā "flīze", līdz tas aizpildīs visu pārlūkprogrammas ekrānu, jo, pārvietojoties lejup pa leju, mūsu "flīze" aizpildīs gan otro, gan trešo ekrānu, kamēr lapas saturs beigsies . Ir skaidrs, ka šāds rezultāts nav dizaina idejas augstums, un mums nebūs "vannas istabas", bet tikai emuārs, kur lasāmība ir ļoti svarīgs punkts.

Vienkārša iespēja, kā atbrīvoties no "flīzēšanas", ir izmantot lielu, vismaz 1024 pikseļu platu attēlu, lai tas aizpildītu visu ekrānu. Tas būs arī labs risinājums, lai atrastu bezšuvju tekstūru, reizinot, attēls būs kā viens veselums.

Kā padarīt fonu pievilcīgāku?

Paldies Dievam, mums ir palīgi šajā jautājumā:

• neatkārtot- atspējot atkārtošanu
• atkārtot-x- raksta atkārtošana tikai horizontāli
• atkārtot-y- raksta atkārtošana tikai vertikāli

Piemēram:

Emuāra galvene

Šī ir fona tekstūra, kas atkārtojas tikai horizontāli.

Nākamais palīgs ir īpašums fona stāvoklis, ļauj novietot fona attēlu jebkurā ekrāna vietā. Šī metode ir plaši izplatīta mūsdienu tīmekļa dizainā. Mums ir attēls, bet tas nav daļa no satura, bet kalpo tikai kā vietnes rotājums.

Virsraksts

Neatkārtota fona piemērs ar noteiktu pozicionēšanu.

Attēls tiek parādīts tikai vienu reizi un atrodas labajā pusē.

Atkāpe no labās malas ir iestatīta uz 200 pikseļiem, lai izvairītos no teksta pārklāšanās ar fonu.

Ja vēlamies, lai attēls vienmēr būtu redzams, ritinot lejup pa ekrānu, īpašums jāpievieno iepriekš minētajam kodam - fona stiprinājums: fiksēts;

Kāda ir atšķirība starp img un fona attēls?

Atšķirība ir būtiska, tag img ievietots tieši ķermenī Html-lapa un atbild par saturu (ilustrācijas, fotogrāfijas, iemiesojumi), nes semantisku slodzi. Ir ļoti svarīgi, lai attēls tiktu indeksēts meklētājprogrammās un nokļūtu meklēšanas rezultātos. Rekvizīti CSS fona attēls- padarīt vietni unikālu un skaistu, tas ir, šo dizainu, kas jāizņem ārējā failā CSS stilus vai izmantot elementa iekšpusē stils.

Protams, tas nenozīmē fona attēls nedarbosies, ja to ievietos ķermenī Html-lapas. Bet es ļoti iesaku izņemt visu, kas saistīts ar dizainu CSS... Rezultātā mēs saņemsim tīru Html-kods:

• tas pozitīvi ietekmēs vietnes indeksēšanu, meklēšanas robotiem patiks jūsu vietne un tā tiks apmeklēta biežāk.
• arī jūsu apmeklētāji būs apmierināti, vietne tiks ielādēta ātrāk, jo ir mazs svars.
• jums kā tīmekļa pārzinim ir vieglāk strādāt ar tīru kodu.

Nu, mēs esam izskatījuši vairāk vai mazāk visas iespējas, izmantojot īpašumu CSS fona attēls... Vairāk prakses draugu! Jūtieties brīvi kopēt kodu un nākt klajā ar savām iespējām!

īsa informācija

CSS versijas

Vērtības

url Vērtība ir ceļš uz grafisko failu, kas norādīts url () konstrukcijā. Šajā gadījumā ceļu uz failu var rakstīt vai nu pēdiņās (dubultā vai vienā), vai bez tiem. neviens Atceļ elementa fona attēlu. manto vērtību pārmanto no vecākiem.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objekta modelis

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

Pārlūkprogrammas

Internet Explorer 7.0 vai jaunāka versija fona piemēro elementa apmales iekšpusei, kurai ir iestatīts rekvizīts hasLayout. Ja elementam nav hasLayout, fona attēla rekvizīts ievēro elementa robežas, kā norādīts specifikācijā. Displeja atšķirība būs pamanāma, ja apmales ir punktētas vai punktētas, nevis cietas.

Ja elements ir iestatīts uz ritināšanu vai automātisku režīmu, pārlūkprogrammas Internet Explorer 8 vertikālā aizkave būs par vienu pikseļu, ritinot fonu.

Internet Explorer līdz versijai 7.0 (ieskaitot) neatbalsta mantoto vērtību.

Ja fons ir iestatīts tabulas rindai (tag ), tad pārlūks Chrome, Safari, iOS to nerāda, kā noteikts specifikācijā, proti, katrai šūnai atsevišķi. Tā kā pārlūkprogrammai vajadzētu parādīt stabilu fonu visai rindai. 2. piemērā ir parādīts kods kļūdas demonstrēšanai.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Šī piemēra rezultāts pārlūkprogrammā Chrome ir parādīts attēlā. 1. Pārlūkprogramma Internet Explorer, Opera un Firefox pareizi parāda līnijas fonu (2. att.).

Rīsi. 1. Fona atkārtošana katrai šūnai

Rīsi. 2. Fons visai līnijai

īsa informācija

CSS versijas

Vērtības

url Vērtība ir ceļš uz grafisko failu, kas norādīts url () konstrukcijā. Šajā gadījumā ceļu uz failu var rakstīt vai nu pēdiņās (dubultā vai vienā), vai bez tiem. neviens Atceļ elementa fona attēlu. manto vērtību pārmanto no vecākiem.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objekta modelis

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

Pārlūkprogrammas

Internet Explorer 7.0 vai jaunāka versija fona piemēro elementa apmales iekšpusei, kurai ir iestatīts rekvizīts hasLayout. Ja elementam nav hasLayout, fona attēla rekvizīts ievēro elementa robežas, kā norādīts specifikācijā. Displeja atšķirība būs pamanāma, ja apmales ir punktētas vai punktētas, nevis cietas.

Ja elements ir iestatīts uz ritināšanu vai automātisku režīmu, pārlūkprogrammas Internet Explorer 8 vertikālā aizkave būs par vienu pikseļu, ritinot fonu.

Internet Explorer līdz versijai 7.0 (ieskaitot) neatbalsta mantoto vērtību.

Ja fons ir iestatīts tabulas rindai (tag ), tad pārlūks Chrome, Safari, iOS to nerāda, kā noteikts specifikācijā, proti, katrai šūnai atsevišķi. Tā kā pārlūkprogrammai vajadzētu parādīt stabilu fonu visai rindai. 2. piemērā ir parādīts kods kļūdas demonstrēšanai.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Šī piemēra rezultāts pārlūkprogrammā Chrome ir parādīts attēlā. 1. Pārlūkprogramma Internet Explorer, Opera un Firefox pareizi parāda līnijas fonu (2. att.).

Rīsi. 1. Fona atkārtošana katrai šūnai

Rīsi. 2. Fons visai līnijai

Es domāju, ka nav nevienas vietas, kur īpašums netiktu izmantots CSS fons... Šķiet, kas var būt vienkāršāks par šo īpašumu? Bet nē, tās iespējas ir daudz plašākas nekā parastais attēla vai krāsas mērķis kā lapas fons. Kaut kas būs pazīstams, bet kaut kas noteikti kļūs par jaunumu daudziem. Jebkurā gadījumā būs noderīgi rūpīgi zināt, kā darbojas fons.

CSS3 īpašumā ienesa daudz jaunu lietu, tas ir gan caurspīdīgums, gan vairāku attēlu piešķiršana kā fons, taču mēs par to runāsim tālāk, un vispirms apskatīsim īpašuma pamatus. fons.

fona krāsa

Esmu diezgan pārliecināts, ka esat vairākas reizes veicis fona krāsu uzdevumus. To var izdarīt, izmantojot vairākus apzīmējumu veidus: parasts (tiek izmantots krāsas nosaukums), heksadecimāls vai RGB apzīmējums. Katrs veids ir vienāds, izmantojiet to, kas jums patīk vislabāk. Es cenšos izmantot īsāko versiju, un uztverei tā ir vienkāršāka, un stila fails ir nedaudz mazāks.

P (fona krāsa: sarkana;) p (fona krāsa: # f00;) p (fona krāsa: # ff0000;) p (fona krāsa: rgb (255, 0, 0;))

CSS3 atbalsta pārredzamību, tāpēc varat to pievienot arī mūsu krāsai, piemēram:

P (fona krāsa: rgba (255, 0, 0, 0,5);)

Pēdējais cipars tika iestatīts uz 50% pārredzamību. Pārredzamības vērtību varat iestatīt no 0 (pilnīgi caurspīdīgs fons) līdz 1 (pilnīgi necaurspīdīgs).

fona attēls

Šo īpašumu izmanto arī ļoti bieži, tas ļauj fonam piešķirt attēlu. CSS3 pievieno iespēju fonam piešķirt vairākus attēlus, katrs izveidojot sava veida slāni, tāpēc katrs nākamais tiek uzlikts uz iepriekšējā. Kāpēc tas varētu būt noderīgi? Viss ir pavisam vienkārši - pieņemsim, ka jums ir jāieskrūvē mazās pogas katrā vietnes stūrī. Nodrošinot vairāk vai mazāk plūstošu izkārtojumu, viena attēla izmantošana nav risinājums. Tāpēc mēs izgatavojam 4 "slāņus", pārvietojam katru attēlu uz savu stūri un viss, problēma ir atrisināta

Pamatteksts (fona attēls: url ("attēls1"), url ("attēls2"), url ("attēls3"))

Ja jums ir jāpiešķir viens attēls fonam, mēs atstājam tikai pirmo kodu, es domāju, ka tas ir saprotams.
Izmantojot jebkuru attēlu kā fonu, jāpatur prātā divi noteikumi:

• iestatiet kontrastējošu fona krāsu gadījumam, ja lietotājs kāda iemesla dēļ nevar parādīt attēlu. Tas var izslēgt nelīdzenu attēlu parādīšanu, ietaupot satiksmi.
• neizmantojiet fona attēlu, lai nodotu svarīgu informāciju. Iepriekš minētā iemesla dēļ lietotājs to var neredzēt.

Atbalsts vairākiem fona attēliem ir pietiekami plašs. Visas pārlūkprogrammas, pat IE8, atbalsta šo īpašumu.