Imagine de fundal a paginii html. Imagine de fundal. Controlul dimensiunii imaginii de fundal

16.06.2020

2 voturi

Bine ati venit pe blogul meu. Să continuăm să învățăm elementele de bază ale html. Acest tutorial va fi atât de simplu și interesant încât sper că veți dori să aflați mai multe despre limbajele de programare. În doar câteva minute vei învăța cum să faci o imagine ca fundal în HTML și să obții rezultate excelente.

Voi vorbi și despre câteva nuanțe care vor face fundalul mai uniform și mai frumos. Ei bine, începem?

Selectarea unei imagini

Aș dori să încep prin a alege o imagine. Pentru a arăta mai uniform și mai frumos pe pagină și nu trebuie să vă deranjați cu dimensiunile și alinierea. Vă sugerez să căutați imediat texturi fără sudură. Ce este?

Din păcate, este imposibil să întindeți o imagine în html pentru a umple întregul ecran. Fotografia este folosită la dimensiunea reală. Dacă imaginea este mică, atunci va acoperi întreaga zonă, ca în captura de ecran de mai jos. Pentru a întinde imaginea, va trebui să creați un document CSS suplimentar, fără acesta nu va funcționa.

Deși, aveți posibilitatea de a ocoli sistemul. Pentru a face acest lucru, utilizați Photoshop și imagini până la lățimea ecranului (1280x720). Deși în acest caz, la derularea în jos, imaginea va înlocui pe alta.

Mult cea mai bună opțiune, dacă nu doriți să utilizați css, va exista o utilizare a texturilor fără sudură. Nu au articulații vizibile. Sunt ca tapetul sau plăcile moderne în design. Unul îl înlocuiește pe celălalt și nu sunt vizibile îmbinări.

Dacă sunteți interesat de absența consecințelor legale pentru utilizarea lor, atunci vă recomand să căutați pe site Pixabay.com .

HTML

Acum să lucrăm cu codul. Ar trebui să remarc imediat că acum lucrăm cu html, adică schimbăm imaginea nu pentru întregul site, ci doar pentru o anumită pagină pentru care se scrie codul. Dacă sunteți interesat să schimbați întreaga resursă, atunci trebuie să codificați folosind css, Dar mai multe despre asta mai târziu.

Deci, puteți lucra în notepad, eu prefer NotePad++. Este mult mai convenabil să lucrezi în el: codul este completat pentru tine, etichetele sunt evidențiate. Programul este gratuit și cântărește aproximativ 3 MB. Îl recomand cu căldură, mai ales dacă ești începător.

Deci, la etichetă corp trebuie să adăugați un atribut fundalși indicați un link către imaginea de unde va fi făcută fotografia. Așa arată în program.

Puteți doar să deschideți notepad și să copiați acest cod. Între ghilimele, pune un link către poza care îți place.

<html> <cap> <titlu > Imagine de fundal</titlu> </cap> <fundalul corpului = „https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png”> </corp> </html>

Imagine de fundal

Aș dori să notez pentru începători, acesta este ideea. Dacă luați o imagine de la Pixabay, atunci trebuie să lipiți linkul nu pe pagina cu imaginea, ci să deschideți imaginea în fila următoare.

Copiați această adresă URL exactă.

Salvați documentul. Nu uita că, dacă folosești notepad, trebuie să folosești extensia .html . Numiți documentul, de exemplu, înapoi.html . În caz contrar, va fi salvat ca Document text iar browserul pur și simplu nu va înțelege ce trebuie să facă.

Gata, pagina este umplută cu o culoare diferită.

Dacă doriți să aflați mai multe despre html, vă sugerez să descărcați curs gratuit de Evgeniy Popov . Din el veți învăța mai multe etichete, capacități lingvistice, veți încerca câteva tehnici noi și veți afla mai multe.

Nu voi spune că cursurile lui Evgeniy Popov sunt extrem de populare. Mulți experți îl certa, iar dacă ați dat peste astfel de afirmații, atunci iată părerea mea. Aceste lecții sunt oferite gratuit și, în ciuda acestui fapt, fac o treabă excelentă cu sarcina lor principală - să arate începătorului elementele de bază și să-l actualizeze.

Așa cum fiecare scriitor are propria sa părere despre cum să scrie, la fel și programatorii au propriul stil. Îți poți petrece întreaga viață învățând cum să creezi site-uri web, dar trebuie să începi de undeva. Din cărți? Nu asta. Da, conțin informații mai fiabile, informații actualizate, dar sunt atât de greu de stăpânit.

Nu sunteți de acord cu mine? Pot oferi o alternativă. Carte de Elizabeth și Erica Freeman Învățarea HTML, XHTML și CSS " Nu este un bestseller foarte plictisitor și a fost lansat nu cu mult timp în urmă, în 2016. Informațiile nu au devenit încă depășite.

CSS

Dacă aveți nevoie ca fundalul să fie repetat pe toate paginile site-ului dvs., atunci CSS este o necesitate. Desigur, puteți specifica calea de fiecare dată, ca în capitolul anterior. Dar imaginați-vă dacă în timp trebuie să îl înlocuiți: linkul devine depășit sau pur și simplu doriți să schimbați designul. Mergi la fiecare pagină și schimbi codul? Acest lucru nu va funcționa.

CSS ajută la rezolvarea acestei probleme. Trebuie să creați un fișier cu extensia css și să introduceți următorul cod:

Să vorbim puțin despre codul în sine. Între paranteze, după url puteți introduce un link către o imagine dintr-o sursă terță parte sau pur și simplu numele documentului dacă imaginea se află în același folder cu acest fișier.

Pentru cei care vor să știe mai bine

Cu css te poți întinde imagine de fundal, asigurați-vă că nu se repetă, adăugați animație GIF și multe altele.

Nu poți scrie totul într-un articol. Și nu mi-am propus o astfel de sarcină. Există o mulțime de subtilități, iar dacă promit că vă vor spune totul într-un singur articol, atunci aceasta nu este altceva decât o înșelăciune.

Vrei să înveți cum să scrii corect site-uri web? Vă recomand să învățați limbaje de programare. Pot recomanda cursul lui Andrey Bernatsky” HTML5 și CSS3 de la Zero la Pro " Îmi place foarte mult acest autor. Nu am urmat acest curs anume în urmă cu câțiva ani, era ceva asemănător, dar mai puțin modern.

Autorul vorbește foarte frumos, totul este ușor și de înțeles. Punctul culminant al acestui curs este că nu doar studiezi, ci creezi un site web specific împreună cu profesorul. Drept urmare, vei primi o carte de vizită, un blog și chiar un magazin online. Foarte tare. Puteți urmări primele trei lecții teoretice despre HTML5 de la acest curs chiar aici și acum.

Apropo, împreună cu acest curs primești 7 bonusuri: elementele de bază ale html și css de Andrei Bernatsky, aspect pentru începători, crearea unei pagini de destinație într-o seară și multe altele. Înainte să te angajezi la un antrenament serios, încearcă cursul gratuit " Exersați HTML5 și CSS3 ».

Ei bine, asta e tot. Abonați-vă la newsletter pentru a afla mai multe. Foarte curand iti voi spune putin mai multe despre aspect adaptiv, mărește câștigurile de la orice blog și îți oferă multe sfaturi utile despre simplificarea muncii. Ne revedem și mult succes în demersurile tale.

De la autor: Bună ziua tuturor. Culorile și imaginile de fundal joacă un rol important în designul web, deoarece vă permit să proiectați orice elemente mai atractiv. Astăzi ne vom uita la cum să facem un fundal în HTML.

Este posibil să folosiți HTML pentru a seta fundalul?

O sa spun imediat ca nu. În general, html nu a fost creat pentru a proiecta pagini web. Este doar foarte incomod. De exemplu, există un atribut bgcolor, cu care puteți seta culoarea de fundal, dar acest lucru este foarte incomod.

În consecință, vom folosi Cascading Style Sheets (CSS). Există mult mai multe oportunități pentru a stabili un fundal. Astăzi ne vom uita la cele mai elementare.

Cum să setați fundalul folosind css?

Deci, în primul rând, trebuie să decideți pentru ce element doriți să setați fundalul. Adică trebuie să găsim un selector căruia îi vom scrie o regulă. De exemplu, dacă trebuie să setați fundalul pentru întreaga pagină ca întreg, puteți face acest lucru prin selectorul de corp și pentru toate blocurile prin selectorul div. Ei bine, etc. Fundalul poate și ar trebui să fie legat de orice alți selectori: clase de stil, identificatori etc.

După ce v-ați decis asupra selectorului, trebuie să scrieți numele proprietății în sine. Pentru a seta culoarea de fundal (și anume o culoare solidă, nu un gradient sau o imagine), utilizați proprietatea background-color. După aceasta, trebuie să puneți două puncte și să scrieți culoarea în sine. Acest lucru se poate face în moduri diferite. De exemplu, folosind cuvinte cheie, cod hexadecimal, rgb, rgba, formate hsl. Orice metodă va funcționa.

Cea mai des folosită metodă este codul hexazecimal. Pentru a selecta culorile, puteți utiliza un program care afișează codul culorilor. De exemplu, Photoshop, vopsea sau un instrument online. În consecință, ca exemplu, voi scrie un fundal general pentru întreaga pagină web.

corp (culoare de fundal: #D4E6B3; )

Acest cod trebuie inserat în secțiunea de cap. Este important ca fișierele să fie în același folder.

Imagine ca fundal

Pentru imagine o voi folosi pictogramă mică limbaj html:

Să creăm un bloc gol cu un identificator:

< div id = "bg" > < / div >

Să-i dăm dimensiuni și fundal explicite:

#bg( lățime: 400px; înălțime: 250px; imagine de fundal: url(html.png); )

#bg(

latime: 400px;

înălțime: 250px;

fundal - imagine : url (html . png );

Din acest cod puteți vedea că am folosit o nouă proprietate - background-image. Este destinat în mod special inserării unei imagini ca fundal într-un element html. Să vedem ce s-a întâmplat:

Pentru a specifica o imagine, trebuie să scrieți după două puncte cuvânt cheie url, apoi indicați calea către fișier între paranteze. În acest caz, calea este specificată pe baza faptului că imaginea se află în același folder cu documentul html. De asemenea, trebuie să specificați formatul imaginii.

Dacă ați făcut acest lucru, iar fundalul încă nu este afișat în bloc, verificați din nou dacă ați scris corect numele imaginii, dacă calea și extensia au fost setate corect. Acestea sunt cele mai comune motive pentru care fundalul pur și simplu nu apare, deoarece browserul nu poate găsi imaginea.

Dar ai observat un lucru? Browserul a preluat și a înmulțit imaginea pe tot blocul. Deci, ca să știți, acesta este comportamentul implicit al imaginilor de fundal - ele sunt repetate pe verticală și pe orizontală atâta timp cât pot încadra în bloc. Prin acest comportament, puteți controla cu ușurință. Pentru a face acest lucru, utilizați proprietatea background-repeat, care are 4 valori principale:

Repetare – valoare implicită, imaginea se repetă pe ambele părți;

Repeat-x – se repetă numai pe axa x;

Repeat-y – se repetă numai de-a lungul axei y;

No-repeat – nu se repetă deloc;

Puteți scrie fiecare valoare și puteți vedea ce se întâmplă. O sa scriu asa:

background-repeat: repetare-x;

fundal - repetare : repetare - x ;

Acum repetați doar pe orizontală. Dacă setați opțiunea fără repetare, atunci ar fi o singură imagine.

Grozav, putem termina asta acum, din moment ce asta capabilități de bază lucrați cu fundalul, dar vă voi arăta încă 2 proprietăți care vă permit să obțineți mai mult control.

Prin repetare, designerii de layout erau capabili să creeze texturi de fundal și degrade folosind o singură imagine mică. Ar putea fi de 30 pe 10 pixeli sau chiar mai mic. Sau poate un pic mai mult. Imaginea a fost de așa natură încât atunci când a fost repetată pe una sau chiar pe ambele părți, nu erau vizibile tranziții, astfel încât rezultatul a fost un fundal unic, fără sudură. Apropo, această abordare merită folosită acum dacă doriți să utilizați o textură fără sudură pe site-ul dvs. ca fundal. Astăzi, gradientul poate fi deja implementat folosind metode css3, despre asta vom vorbi cu siguranță mai târziu.

Poziția de fundal

Mod implicit imagine de fundal, dacă nu este setat să se repete, va fi în colțul din stânga sus al blocului său. Dar poziția poate fi schimbată cu ușurință folosind proprietatea background-position.

Îl puteți seta în moduri diferite. O opțiune este să indicați pur și simplu părțile în care ar trebui să fie amplasată imaginea:

fundal-poziție: dreapta sus;

fundal - poziție: dreapta sus;

Adică pe verticală totul rămâne la fel: imaginea de fundal este situată deasupra, dar pe orizontală am schimbat partea în dreapta, adică în dreapta. O altă modalitate de a seta o poziție este ca procent. În acest caz, numărătoarea inversă începe în orice caz din colțul din stânga sus. 100% - întregul bloc. Astfel, pentru a plasa poza exact în centru, o scriem astfel:

fundal-poziție: 50% 50%;

Amintiți-vă un lucru important despre poziționare - primul parametru este întotdeauna poziția orizontală, iar al doilea este poziția verticală. Deci, dacă vedeți valoarea 80% 20%, atunci puteți concluziona imediat că imaginea de fundal va fi deplasată foarte mult la dreapta, dar nu va coborî prea mult.

Și, în sfârșit, puteți specifica poziția în pixeli. Totul este la fel, doar că în loc de % va fi px. În unele cazuri, o astfel de poziționare poate fi necesară.

Notație scurtă

Sunteți de acord că codul se dovedește a fi destul de greoi dacă totul este setat așa cum am procedat noi. Se pare că trebuie specificată calea către imagine, repetarea și poziția. Desigur, repetarea și poziția nu sunt întotdeauna necesare, dar, în orice caz, ar fi mai corect să folosiți o notație scurtă pentru proprietate. Arata cam asa:

fundal: #333 url(bg.jpg) no-repeat 50% 50%;

Adică, primul pas este să înregistrați culoarea generală de fundal solidă, dacă este necesar. Apoi calea către imagine, repetare și poziție. Dacă nu este necesar un parametru, atunci pur și simplu omiteți-l. De acord, acest lucru este mult mai rapid și mai convenabil și, de asemenea, ne reducem semnificativ codul. În general, vă sfătuiesc să scrieți întotdeauna în formă prescurtată, chiar dacă trebuie să indicați doar o culoare sau o imagine.

Controlul dimensiunii imaginii de fundal

Imaginea noastră actuală nu este foarte bună pentru a demonstra următorul truc, așa că voi lua altul. Lasă-l de dimensiunea unui bloc sau mai mare. Așadar, imaginați-vă că vă confruntați cu sarcina de a realiza o imagine de fundal, astfel încât să nu-și umple complet blocul. Și imaginea, de exemplu, este chiar mai mare decât dimensiunea blocului.

Ce poți face în acest caz? Desigur, cea mai simplă și mai rezonabilă opțiune ar fi să reduceți pur și simplu imaginea, dar nu este întotdeauna posibil să faceți acest lucru. Să spunem că se află pe server și în acest moment nu există timp sau oportunitate pentru a o reduce. Problema poate fi rezolvată folosind proprietatea background-size, care poate fi numită relativ nouă și care vă permite să manipulați dimensiunea imaginii de fundal, sau chiar orice fundal.

Deci imaginea mea ocupă acum tot spațiul din bloc, dar îi voi da o dimensiune de fundal:

dimensiunea fundalului: 80% 50%;

Din nou, primul parametru setează dimensiunea orizontală, al doilea - dimensiunea verticală. Vedem că totul a fost aplicat corect - fotografia a devenit 80% din lățimea blocului în lățime și jumătate în înălțime. Aici trebuie doar să faceți o clarificare - setând dimensiunea ca procent, puteți influența proporțiile imaginii. Asa ca aveti grija daca vreti sa nu suparati proportiile.

După cum puteți ghici, dimensiunea fundalului poate fi specificată și în pixeli. Mai sunt două cuvinte cheie care pot fi, de asemenea, folosite:

Coperta – imaginea va fi scalată astfel încât cel puțin pe o parte să umple complet blocul.

Conține – o scalează astfel încât imaginea să se potrivească complet în bloc la dimensiunea sa maximă.

Avantajul acestor valori este că nu schimbă proporțiile imaginii, lăsându-le la fel.

De asemenea, ar trebui să înțelegeți că întinderea imaginii poate duce la o deteriorare a calității acesteia. Pot da un exemplu din viața și practica reală a designerilor de layout. Toată lumea știe și înțelege că atunci când proiectați pentru desktop-uri, trebuie să adaptați site-ul la lățimile principale ale monitorului: 1280, 1366, 1920. Dacă luați o imagine de fundal de, să zicem, 1280 pe 200 și nu îi dați un fundal - dimensiune, apoi ecrane cu o lățime mai mare Va apărea un spațiu gol, imaginea nu va umple complet lățimea.

În 99% din cazuri, acest lucru nu se potrivește dezvoltatorului web, așa că el setează dimensiunea fundalului: acoperire, astfel încât imaginea să se întindă întotdeauna la lățimea maximă a ferestrei. Aceasta este o tehnică bună de utilizat, dar acum vă veți confrunta cu problema că utilizatorii cu o lățime a ecranului de 1920 de pixeli pot vedea o calitate suboptimă a imaginii.

Permiteți-mi să vă reamintesc, se va întinde până la lățimea maximă. În consecință, calitatea se va deteriora automat. Singura soluție corectă aici ar fi să folosiți inițial o imagine dimensiune mai mare- 1920 pixeli latime. Apoi, pe cele mai largi ecrane, va fi în dimensiunea sa naturală, iar pe altele va fi pur și simplu tăiat treptat, dar, în același timp, cu o selecție adecvată imagine de fundal, pe aspect Acest lucru nu va afecta site-ul.

În general, acesta este doar un exemplu despre cum să utilizați cunoștințele pe care le-ați dobândit în acest articol atunci când amenajați machete reale.

Fundal translucid folosind css

O altă caracteristică cu care se poate implementa folosind css– fundal translucid. Adică prin acest fundal se va putea vedea ce este în spatele lui.

De exemplu, voi seta întreaga pagină ca fundal pentru imaginea pe care am folosit-o mai devreme în exemple. Pentru blocul cu identificatorul bg, pe care ne desfășurăm toate experimentele, vom seta fundalul folosind formatul de setare a culorii rgba.

După cum am spus mai devreme, există multe formate pentru setarea culorilor în CSS. Unul dintre ele este rgb, un format destul de cunoscut pentru cei care lucrează în el editori grafici. Se scrie astfel: rgb(17, 255, 34);

Prima valoare dintre paranteze este saturația de roșu, apoi verde, apoi albastru. Valoarea poate fi numerică de la 0 la 255. În consecință, formatul rgba nu este diferit, se adaugă doar un parametru - canalul alfa. Valoarea poate fi de la 0 la 1, unde 0 este transparența totală.

Salutare tuturor! Umilul tău slujitor este în legătură cu tine cu o porțiune de material util și practic despre cum să stabilești un fundal pentru un site web. Acesta este chiar începutul în aspectul html și aici voi demonstra clar cu un exemplu cum puteți face un fundal frumos pentru un site care va atrage cu siguranță utilizatorul de internet și va adăuga originalitate.

Dacă ați observat, majoritatea oamenilor de afaceri online folosesc un fundal unic pe paginile lor de vânzări și abonament. Astăzi vom analiza componenta tehnică a acestui proces.

Deci, mai întâi avem nevoie, desigur, de o imagine. Există un site foarte bun pe internetul străin de unde puteți descărca diverse imagini pentru fundalul site-ului. Pur și simplu există un număr mare de ei acolo. Site-ul se numește Subtle Patterns.

Apare pe primul loc în lista motorului de căutare Google, așa că îl recomand pentru serviciu. De asemenea, puteți găsi un numar mare de alte site-uri dacă introduceți într-un motor de căutare ceva de genul „modele de imagine de fundal”, „descărcați imaginea de fundal pentru site” și așa mai departe.

Dacă nu aveți probleme cu limba engleză, o veți înțelege fără dificultate.

In acest articol am ales un subiect si se numeste tweed. Îl poți descărca.

Așa arată într-o versiune mică pe site

Mai întâi creăm document nouîntr-un program

Și înainte de a-l edita, asigurați-vă că îl salvați sub un nume, de exemplu index.htmlși creați un folder pe computer, de exemplu, puteți crea un folder „Site-ul meu” și puneți-ne fișier index(index.html). Este mai bine să creați un folder pe Limba engleză, astfel încât să nu existe confuzii în browser și afișare incorectă a site-ului.

În plus, în folderul principal „site-ul meu” trebuie să creați încă două subdosare, într-unul ne vom plasa toate imaginile și se va numi „imagini”, iar celălalt îl vom numi „CSS” (stil în cascadă). foi) și puneți dosarul acolo stil.css

Acum putem lucra în documentul nostru. Următorul pas este introducerea unui cod HTML gol, așa-numitul cadru principal de la care începe totul. Îl poți descărca direct. Apoi, vom copia totul din acest fișier și îl vom transfera în fișierul nostru de program. Rezultatul final ar trebui să fie ceva de genul următor

Lângă numele fișierului veți observa o dischetă roșie. Deci, dacă este roșu, înseamnă că fișierul nu a fost salvat, asigurați-vă că faceți clic pe butonul de salvare, astfel încât discheta să devină albastră.

În eticheta de titlu puteți schimba titlul documentului, de exemplu îl puteți face „Prima mea pagină web”. Și asigurați-vă că pagina dvs. este salvată în codificare UTF-8

În caz contrar, dacă există o altă codificare, de exemplu Windows-1251, atunci textul documentului din browser va fi afișat în hieroglife. Puteți modifica codificarea în secțiunea „Codificări – Codificare în Utf-8 (fără BOM)” din bara de instrumente a programului.

Și nu uitați să salvați fiecare acțiune pe care o întreprindem.

Acum să începem să creăm fundalul în documentul nostru. Voi spune imediat că toate acțiunile noastre asupra designului unei pagini web se vor desfășura folosind foi de stil în cascadă numite CSS, adică vom crea cadrul în html și îl vom aduce la un stil și aspect frumos folosind CSS.

În acest fel, vei învăța singur ordinea corectă a acțiunilor. Nu sta chiar înăuntru document html Dacă nu doriți să vă ocupați de stiluri, este mai bine să le puneți într-un document separat.

Pentru a face acest lucru în nostru Programul Notepad++ să creăm un alt fișier și să-l numim Style.css și să-l salvăm într-un nou folder css, care va fi localizat în folder impartit"Site-ul meu"

Grozav! Pentru ca browserul nostru să afișeze pagina corect, trebuie să conectăm foaia de stil la documentul nostru html. Iată cum se face

Intrăm direct pe toată linia de mai sus. Cu această linie conectăm foaia noastră de stil.
Acum vom defini o imagine de fundal pentru eticheta corpului nostru prin foaia de stil. Pentru a face acest lucru, creăm următoarea structură în documentul style.css (doar să o luăm și să o scriem în codul programului)

Lasă-mă să explic puțin aici. Atributul de fundal are multe valori, dintre care una este background-repeat, care este responsabilă pentru extinderea imaginii noastre de fundal pentru documentul web.

FUNDAL-REPETARE:

REPEAT //(întinde pe orizontală și pe verticală) REPEAT-X // (întinde doar pe orizontală) REPEAT-Y //(întinde doar pe verticală) NU REPETĂ //(nu repeta imaginea de fundal)

În cazul nostru, replicăm imaginea noastră mică atât pe verticală, cât și pe orizontală. Drept urmare, întreaga pagină este umplută cu imaginea noastră. Iată cum arată în browser:

Am făcut și o selecție de site-uri special pentru tine de unde poți descărca un fundal frumos pentru site

Mulți designeri de layout începători, care doar se adâncesc în esența creării site-urilor web, se întreabă adesea cum să facă din fundal o imagine în html. Și chiar dacă unii oameni își pot da seama de această sarcină, problemele apar la întinderea imaginii pe întreaga lățime a monitorului. În același timp, aș dori ca site-ul să fie afișat în mod egal pe toate browserele, deci trebuie îndeplinită cerința de cross-browser. Puteți seta fundalul în două moduri: folosind stilul CSS. Fiecare alege cel mai mult pentru sine cea mai buna varianta. Cu siguranță, Stilul CSS mult mai convenabil, deoarece codul său este stocat în dosar separatși nu ocupă coloane suplimentare în etichetele principale ale site-ului, dar mai întâi vom lua în considerare o metodă simplă de instalare a unei imagini pe fundalul site-ului.

Etichete HTML de bază pentru crearea unui fundal

Deci, să trecem la întrebarea, fundal în html pe întregul ecran. Pentru ca site-ul să arate frumos, trebuie să înțelegeți un detaliu destul de important: este suficient să faceți un fundal gradient sau să îl pictați cu o culoare solidă, dar dacă trebuie să inserați o imagine în fundal, aceasta nu se va întinde. pe toată lățimea monitorului. Inițial, trebuie să selectați o imagine sau să faceți singur un design cu extensia în care va fi afișată pagina site-ului dvs. Numai după ce imaginea de fundal este gata, transferați-o într-un folder numit „Imagini”. În el vom stoca toate imaginile, animațiile și altele folosite fisiere grafice. Acest folder ar trebui să se afle în directorul rădăcină cu tot fișiere html. Acum poți trece la cod. Există mai multe opțiuni pentru scrierea codului care va schimba fundalul într-o imagine.

Scrieți atributul etichetei.
Prin stilul CSS în cod HTML.
Scrieți stilul CSS într-un fișier separat.

Cum să faci din fundal o imagine în HTML depinde de tine, dar aș dori să spun câteva cuvinte despre cum ar fi cel mai optim. Prima metodă, care utilizează scrierea printr-un atribut de etichetă, a fost demult depășită. A doua opțiune este folosită în cazuri foarte rare, doar pentru că se obține o mulțime din același cod. Și a treia opțiune este cea mai comună și eficientă. Aici Exemple HTML Etichete:

Prima modalitate de a scrie este prin atributul tag (corp) din fișierul index.htm. Este scris sub următoarea formă: (body background= "Folder_name/Image_name.extension")(/body). Adică, dacă avem o imagine cu numele „Imagine” și extensia JPG și am numit folderul „Imagini”, atunci intrarea codului HTML va arăta astfel: (body background="Imagini/Imagine.jpg") … (/corp) .
A doua metodă de înregistrare afectează stilul CSS, dar este scrisă în același fișier numit index.htm. (body style="background: url("../Images/Picture.jpg")").
Și a treia metodă de înregistrare se face în două fișiere. Într-un document numit index.htm, este scrisă următoarea linie: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). Și în fișierul de stil numit style.css scriem deja: body (background: url(Images/Picture.jpg")).

Am discutat despre cum să faci o imagine de fundal în HTML. Acum trebuie să înțelegeți cum să întindeți imaginea pe lățimea întregului ecran.

Modalități de a întinde o imagine de fundal la lățimea ferestrei

Să ne imaginăm ecranul sub formă de procente. Se pare că întreaga lățime și lungime a ecranului va fi 100% x 100%. Trebuie să întindem imaginea la această lățime. Să adăugăm o linie la intrarea de imagine din fișierul style.css, care va întinde imaginea pe toată lățimea și lungimea monitorului. Cum este scris asta în stil CSS? E simplu!

fundal: url(Imagini/Imagine.jpg")

dimensiunea fundalului: 100%; /* această intrare este potrivită pentru majoritatea browsere moderne */

Așa că ne-am dat seama cum să facem o imagine ca fundal în html pentru a umple întregul ecran. Există, de asemenea, o modalitate de a scrie în fișierul index.htm. Deși această metodă este depășită, este necesar ca începătorii să o cunoască și să o înțeleagă. În eticheta (head)(style) div ( background-size: cover; ) (/style) (/head), această intrare înseamnă că selectăm un bloc special pentru fundal, care va fi poziționat pe toată lățimea fereastra. Ne-am uitat la 2 moduri de a crea fundalul unui site web imagine html astfel încât imaginea se întinde pe toată lățimea ecranului în orice browser modern.

Cum să faci un fundal fix

Dacă decideți să utilizați o imagine ca fundal al unei viitoare resurse web, atunci trebuie doar să aflați cum să o faceți nemișcată, astfel încât să nu se întindă în lungime și să nu strice aspectul estetic. Este destul de ușor să scrii acest mic adaos cu ajutor. Trebuie să adăugați o frază în fișierul style.css după fundal: url(Imagini/Imagine.jpg") fix; sau adăugați o linie separată după punct și virgulă - poziție: fix. Astfel, imaginea de fundal va rămâne nemișcată. În timpul Derulând prin conținutul de pe site, veți vedea asta șiruri de text mișcă, dar fundalul rămâne pe loc. Așa că ați învățat cum să creați o imagine de fundal în HTML în mai multe moduri.

Lucrul cu un tabel în HTML

Mulți dezvoltatori web fără experiență, când se confruntă cu tabele și blocuri, adesea nu înțeleg cum să facă o imagine ca fundal de tabel în HTML. Ca toate stilurile CSS, acest limbaj de programare web este destul de simplu. Și soluția la o astfel de problemă ar fi să scrieți câteva linii de cod. Ar trebui să știți deja că scrierea rândurilor și coloanelor din tabel este denumită etichete (tr) și, respectiv, (td). Pentru a face fundalul tabelului sub forma unei imagini, trebuie să adăugați o expresie simplă la eticheta (tabel), (tr) sau (td) care indică un link către imagine: fundal = URL-ul imaginii. Pentru claritate, să dăm câteva exemple.

Tabele cu o imagine în loc de fundal: exemple HTML

Să desenăm un tabel 2x3 și să facem din fundal o imagine salvată în folderul „Imagini”: (fondul tabelului = „Imagini/Imagine.jpg”) (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/tabel). În acest fel, masa noastră va fi pictată pe fundalul imaginii.

Acum haideți să desenăm aceeași placă cu dimensiunile 2x3, dar introduceți o imagine în coloanele numerotate 1, 4, 5 și 6. (tabel)(tr)(td background = „Imagini/Imagine.jpg”)1(/td) (td) )2 (/td) (td)3(/td)(/tr) (tr)(td fundal = „Imagini/Imagine.jpg”)4(/td) (Td fundal = „Imagini/Imagine.jpg”) 5( /td) (td fundal = „Imagini/Imagine.jpg”)6(/td) (/tr) (/tabel). După vizualizare, vedem că fundalul apare doar în acele celule în care ne-am înregistrat, și nu în întregul tabel.

Compatibilitate cross-browser a site-ului

Există, de asemenea, compatibilitatea între browsere a unei resurse web. Aceasta înseamnă că paginile site-ului vor fi afișate la fel de corect în tipuri diferiteși versiuni de browser. În acest caz, trebuie să ajustați codul HTML și stilul CSS la browserele necesare. În plus, în epoca modernă a dezvoltării smartphone-urilor, mulți dezvoltatori web încearcă să creeze site-uri web adaptate pentru versiuni mobileși sub vizualizarea computerului.

17.10.2015

Nu încă

Salutare tuturor!
Să continuăm să învățăm elementele de bază ale HTML.
În această lecție vă voi spune și vă voi arăta exemple cum să faci un fundal dintr-o culoare sau imagine dintr-o pagină HTML.
Este destul de simplu!
Să începem cu culoarea!
Cred că nu ați ratat-o, unde v-am spus cum să schimbați culoarea textului și la sfârșitul articolului am dat coduri pentru diverse culori și nuanțe. De ce ți-am amintit de această lecție? Da, pentru că există un tabel cu coduri de culoare gata făcute, ia-le și exersează-le imediat în această lecție.
Deci, cum să faci o culoare de fundal în HTML...

Culoare de fundal în HTML

Culoarea implicită de fundal într-un document HTML este albă. Cum să setați culoarea după cum doriți?
Atributul „bgcolor” ne va ajuta în acest sens. A picta peste fundalul, adăugați acest atribut la eticheta „corp”:

Sau cam asa:

Iată codul HTML complet:

Schimbarea culorii de fundal - site-ul web Textul paginii va fi verde, iar fundalul va fi negru.

Rezultatul va fi astfel:

Dacă doriți să faceți un fundal dintr-o imagine, adăugați atributul „background” la eticheta „body”:

Completați orice imagine unde se află pagina dvs. web (în exemplul meu, pagina se numește „fon” cu extensia „.gif”):

Iată codul HTML complet:

fundal – site web

Rezultatul va fi astfel:

Dacă imaginea de fundal se află în folderul imagini sau în alt folder, va arăta astfel:

Iată codul HTML complet:

fundal – site web Textul paginii pe un fundal frumos.

Asta e tot pentru azi! Cred că lecția nu a fost grea și ai înțeles totul. Dacă aveți întrebări, scrieți în comentarii.
Vă aștept cu nerăbdare la următoarele lecții.

Postarea anterioară
Următoarea intrare