Ligzdošanas vieta: kā padarīt fona attēlu html

Daudziem iesācējiem web dizaineri, tikai ienirt būtību radīšanu vietās, bieži brīnums, kā to izdarīt HTML fona attēlu. Un, ja kāds no tiem var tikt galā ar šo problēmu, tā joprojām ir problēma brīdī stiepjas visā platumā attēlu monitorā. Tajā pašā laikā es gribētu redzēt vietu, tiek parādīti vienādi uz visiem pārlūkiem, lai tā būtu izpildītu pārrobežu pārlūku prasībām. Jūs varat iestatīt fona divos veidos: izmantojot HTML tagus un CSS stilus. Katrs pats izvēlas labāko variantu. Protams, CSS stils ir daudz ērtāk, jo tās kods tiek glabāti atsevišķā failā un neaizņem papildus skaļruņiem galvenajā vietnes birkām, bet vispirms ļaujiet mums apsvērt vienkāršu metodi uzstādot attēlu uz fona vietā.

Pamata HTML tagus, lai radītu fonu

Tātad, mēs ejam uz jautājumu par to, kā padarīt fona attēlu HTML uz ekrāna. Lai izskatītos skaisti vietni, jums ir jāsaprot viena diezgan svarīgu detaļu: tas ir pietiekami vienkārši, lai veiktu gradienta fona vai gleznot to vienkrāsainu, bet, ja jums ir nepieciešams, lai ievietotu fona attēlu, tas nebūs stiept pilnā platumā monitoru. Attēls sākotnēji nepieciešams uzņemt vai izveidot savu dizainu ar šo pagarinājumu, kurā jums būs parādīt lapu vietā. Tikai tad, kad fona attēls ir gatavs, velciet to mapē ar nosaukumu «Images». Tajā mēs glabāt visas lietotas attēlus, animācijas un citus grafiskos failus. Šī mape jāatrodas saknes direktorijā ar visiem saviem html failus. Tagad jūs varat pāriet un kodu. Ir vairākas iespējas, kā rakstot kodu, ar kuru fona mainīsies attēlu.

1. Rakstiet tagu atribūtu.
2. Izmantojot CSS stilā HTML kodu.
3. Rakstiet CSS stilus atsevišķā failā.

Kā HTML padarīt fona attēlu, jums izlemt, bet es gribētu teikt dažus vārdus par to, kā tas būtu visoptimālākais. Pirmā metode ir rakstot caur tagu atribūtu jau sen ir novecojis. Otra iespēja ir izmantota ļoti reti, jo izrādās, ka daudzi to pašu kodu. Trešā iespēja ir visizplatītākais un efektīva. Šeit ir piemēri HTML tagus:

1. Pirmais ieraksts metode, izmantojot tagu atribūtu (ķermeņa), kas index.htm failā. Tā tiek uzglabāta šādā veidā: (ķermeņa fona = "Mape / Nazvanie_kartinki.rasshirenie") (/ body). Tas ir, ja mums ir attēlu ar nosaukumu «Bilžu» un paplašināšanas JPG un mapes, mēs ar nosaukumu «Images», tad HTML kods ieraksts izskatās šādi: (body background = "Attēlu / picture.jpg") ... (/ korpuss) .
2. Otra metode ietver ierakstīšanas CSS stilu, bet tas ir rakstīts vienā failā ar nosaukumu index.htm. (Body style = "background: url (" ../ Images / picture.jpg) ").
3. Trešā metode ieraksta tiek veikts divos failos. Dokumentā ar nosaukumu index.htm tag (galvas) ir rakstīts šāds līniju: (galvu) (saite rel = "stilu" type = "text / css" href = "http: // vietne / article / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ galva). Fails ar nosaukumu Style.css stils jau rakstīt: ķermenis {background: url (attēli / picture.jpg)}.

Kā HTML padarīt fona attēlu, mēs saprotam. Tagad jums ir nepieciešams, lai noskaidrotu, kā izstieptu attēlu visā platumā visu ekrānu.

Veidi, lai izstieptu fona attēlu platumu loga

Mēs pārstāvam savu ekrāna formā procentos. Izrādās, ka visa platums un garums no ekrāna būs 100% x 100%. Mums ir nepieciešams, lai izstieptu attēlu šajā platumā. Pievienot attēla faila ierakstīšanas style.css līnija, kas būs stiept attēlu visā platumā un garumā monitora. Kā tas ir uzrakstīts CSS stilu? Tas ir vienkārši!

ķermenis

{

fons: url (attēli / picture.jpg)

background-size: 100%; / * Šis amats ir piemērota lielākajai daļai mūsdienu pārlūkprogrammām * /

}

Tāpēc izdomājām, kā padarīt attēlu fona html uz ekrāna. Ir arī metode Ierakstot index.htm failā. Lai gan šo metodi un novecojis, bet iesācējiem tas ir nepieciešams zināt un saprast. Atzīme (galva) (stils) div {background-size: vāks; } (/ Style) (/ galva), šis ieraksts nozīmē, ka mēs piešķirt īpašu vienību fona, kas tiks novietots visā platumā loga. Mēs esam apsvēruši divus veidus, kā padarīt fona attēlu HTML lapā, tā, ka attēls tiek izstiepts uz visu platumu ekrāna jebkurā no modernām pārlūkprogrammām.

Kā veikt fiksētu fona

Ja jūs nolemjat, lai izmantotu attēlu kā fonu nākotnes interneta resurss, tad jums ir nepieciešams zināt, kā padarīt to noteikta, tāpēc, ka tas nav izstiepts garumā un nav sabojāt estētisko izskatu. Vienkārši izmantojot HTML kodu, lai reģistrētu nelielu papildinājumu. Jums ir nepieciešams iesniegt Style.css pievienot frāzi pēc fonā: url (attēli / picture.jpg) fiksēts; vai tā vietā tika pievienota pēc Semikolu atsevišķs līnijas - stāvoklī: fiksēta. Tātad, jūsu tapetes tiks fiksēts. Laikā ritināšanu saturu uz vietas, jūs redzēsiet, ka teksta līnijas virzās, bet fons paliek savā vietā. Tātad, jūs esat iemācījušies, kā to izdarīt html fona attēlu vairākos veidos.

Darbs ar tabulām HTML

Daudzi nepieredzējuši web izstrādātājiem, saskaras ar galdiem un blokiem, bieži vien nesaprotu, kā padarīt HTML attēla fona tabulu. Tāpat kā visas komandas HTML un CSS stilus, web programmēšanas valoda ir diezgan vienkāršs. Un šīs problēmas risinājums ir uzrakstīt pāris rindiņas kodu. Jums jau vajadzētu zināt, ka rakstot tabulu rindas un kolonnas, attiecīgi, kā norādīts ar tagiem (TR) un (TD). Lai fonu tabulas formā attēlu, tas ir nepieciešams, lai pievienotu tagu (galda), (TR) vai (TD), ar vienkāršu frāzi ar atsauci uz atsauces attēls: fona = URL attēlus. Skaidrības labad, mēs sniedzam dažus piemērus.

Tabula ar attēlu, nevis fona: HTML piemēri

Zīmēt 2x3 galdu un padarīt to par fona attēlu saglabāti mapē "Images": (galda fona = "images / picture.jpg") (tr) (TD) 1 (/ td) (TD) 2 (/ td) (TD) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabula). Tātad mūsu tabula tiks sastādīts fona attēlu.

Tagad izdarīt tās pašas plates izmērus 2x3, bet ievietot attēlu kolonnām numurētas 1., 4., 5. un 6. (tabula) (TR) (TD fons = "Attēlu / picture.jpg"), 1 (/ td) (TD) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td fons = "Images / picture.jpg") 4 (/ td) (td fons = "Images / picture.jpg") 5 ( / td) (td fons = "Images / picture.jpg") 6 (/ TD), (/ TR) (/ tabula). Pēc tam, kad skatoties, mēs varam redzēt, ka fons parādās tikai tajās šūnās, kurā mēs reģistrētas, un nevis visu tabulu.

Cross pārlūku saderības vietne

Ir tāda lieta kā pārrobežu pārlūku saderību interneta resurss. Tas nozīmē, ka jūsu portāls ir vienlīdz labi redzama dažāda veida un versijas pārlūkiem. Tam jābūt HTML kods un CSS stilu, lai pielāgotu nepieciešamos pārlūkprogrammas. Turklāt mūsdienu laikmetā viedtālruņiem, daudzi web izstrādātāji mēģina izveidot vietnes un pielāgotas mobilo versiju un datora izskatu.