Imagine de fundal a paginii html. Imagine de fundal

Aproape fiecare site web popular are un aspect frumos. O parte importantă a designului site-ului web este fundalul, numit și fundal, pe care fiecare dintre noi îl poate crea sau schimba. În acest articol vă voi spune cum să puneți un fundal pe un site web.

Crearea unui nou fundal pentru site-uri web

Pentru a finaliza sarcina, puteți utiliza una dintre cele 4 metode:

1. Fundal cu o singură culoare
2. Fundal cu textură
3. Fundal folosind un gradient
4. Fundal dintr-o imagine mare

Creați un fundal folosind o singură culoare

Pentru a crea sau modifica fundalul site-ului, care constă dintr-o singură culoare, trebuie să mergeți la fișier stil.css, în care găsiți valoarea - corp (este responsabil pentru corpul principal al site-ului). Acum trebuie să înregistrați funcția de culoare de fundal dacă nu a existat și să indicați codul de culoare. În cazul în care trebuie să creați un fundal alb pentru un site web, va trebui să scrieți următorul cod:

culoare de fundal: #83C5E9; (fond albastru, ca în exemplu)

Puteți găsi o listă completă de culori pe site - (STM). Pentru a schimba culoarea, schimbați pur și simplu valoarea după două puncte și bucurați-vă de eforturile voastre.

Crearea unui fundal folosind textura

Această metodă a fost deosebit de populară în ultima vreme, deoarece vă permite să creați un fundal frumos pentru site. Texturile pot fi simple, dar foarte frumoase, motiv pentru care sunt adesea folosite. Pentru a conecta orice textură, trebuie să o încărcați în folderul de imagini de pe găzduirea unde este instalat site-ul dvs. După aceasta, ar trebui să scrieți următorul cod:

culoare de fundal: #537759;

imagine de fundal: url(images/pattern.png);

Acest cod conține un parametru familiar pentru menținerea culorii (este verde) și un element care este responsabil pentru conectarea texturii verde.

Realizarea unui fundal folosind un gradient

Orice imagine care este conectată folosind funcții css poate fi repetată atât pe orizontală, cât și pe verticală (de-a lungul axelor XŞi Y). Această oportunitate ne permite să creăm orice fundal simplu pentru site cu propriile noastre mâini. Pentru a face acest lucru, trebuie să creați un gradient de 1 megapixel lățime (vezi imaginea de mai jos), să îl salvați ca imagine și să îl încărcați pe găzduirea dvs. După aceasta, puteți scrie codul necesar, și anume:

culoare de fundal: #83C5E9;

imagine de fundal: url(images/gradient.jpg);

background-repeat: repetare-x;

În acest set, în ordinea priorităților, există o funcție responsabilă de culoarea de fundal, pe care o folosim pentru reasigurare. După aceasta, un parametru care este responsabil pentru conectarea gradientului și, în sfârșit, o funcție care este responsabilă cu repetarea gradientului de-a lungul axei X.

Utilizarea unei imagini mari pentru fundalul site-ului

Această metodă este a doua cea mai populară, deoarece vă permite să utilizați diferite imagini pentru a crea un fundal. Pentru a implementa această metodă, trebuie doar să încărcați o imagine mare în folderul de imagini al site-ului și să introduceți următorul cod:

culoare de fundal: #000000;

imagine de fundal: url(imagini/titlu imagine.jpg);

fundal-poziție: centru sus;

background-repeat: fără repetare;

Dacă totul este clar cu primii doi parametri, atunci ultimii doi trebuie acoperiți. A treia funcție vă permite să fixați imaginea în centrul site-ului, iar ultimul parametru blochează repetarea acesteia în întreaga structură a paginii.

Schimbarea fundalului pe site-urile web ucoz

Acele metode de creare a unui fundal pentru un site pot fi folosite pe diferite sisteme de management al conținutului, dar nu și pe site-uri - ucoz. Pentru a schimba fundalul pentru site-ul web ucoz, trebuie să accesați panoul de control al site-ului, accesați „Managementul designului”, și apoi în „Editarea șabloanelor”.

Acum trebuie să deschideți Foaia de stil (CSS), găsiți linia "corp"și parametru "fundal". După aceasta, trebuie să copiați linkul, să-l lipiți în browserul dvs. de internet și veți avea acces la imaginea care a fost fundalul.

Pentru a utiliza un fundal nou, trebuie doar să îl încărcați în Managerul de fișiere. În același timp, asigurați-vă că numele noii imagini de fundal este același ca înainte de schimbare. Salvați-vă munca și accesați site-ul web pentru a vedea lucrările efectuate.

Schimbarea fundalului site-ului în HTML

Dacă doriți să faceți fundalul pe un site html folosind o imagine, atunci pur și simplu introduceți linia în cod:

Și dacă doriți să faceți fundalul site-ului folosind culoare, atunci linia ar trebui să arate astfel:

Aceasta încheie povestea noastră. Acum știi cum să faci un fundal pentru un site web. Proiecte fericite!

Mulți designeri de layout începători, care doar aprofundează î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 cea mai optimă opțiune pentru sine. Desigur, stilul CSS este mult mai convenabil, deoarece codul său este stocat într-un fișier separat și nu ocupă coloane suplimentare în etichetele principale ale site-ului, dar mai întâi, să ne uităm la o metodă simplă de setare a unei imagini la 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 alte fișiere grafice pe care le folosim. Acest folder ar trebui să fie în directorul rădăcină al tuturor fișierelor dvs. 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ă. Iată exemple HTML de 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? Este simplu!

fundal: url(Imagini/Imagine.jpg")

dimensiunea fundalului: 100%; /* această intrare este potrivită pentru majoritatea browserelor 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ă alocăm un bloc special pentru fundal, care va fi poziționat pe toată lățimea fereastră. Am analizat 2 moduri de a face din fundalul unui site web o imagine HTML, astfel încât imaginea să se întindă 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, vei vedea că liniile de text se mișcă, dar fundalul rămâne pe loc. Așa că ai învățat cum să faci din fundal o imagine î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 diferite tipuri și versiuni de browsere. Î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 adaptate atât pentru versiuni mobile, cât și pentru vizualizări de computer.

26.11.2016 04.02.2018

Această lecție vă va spune cum cum să eliminați fundalul dintr-o fotografie și să introduceți unul nou în Photoshop. Voi descrie o modalitate destul de simplă, corectă și rapidă de a înlocui o imagine.

De multe ori într-o fotografie nu suntem mulțumiți de fundalul în care ne aflăm și există tentația de a introduce ceva interesant. Acest lucru se poate face pur și simplu folosind Photoshop. Principal înlocuirea fundalului trebuie făcută eficientși cu grijă, astfel încât noul fundal să se potrivească armonios în fotografie. Prin urmare, trebuie să selectați cu atenție fundalul pe care doriți să îl introduceți, astfel încât să se potrivească cât mai bine în compoziție și să fie asemănător ca culoare, astfel încât să nu fie nevoie să faceți multă corecție a culorii mai târziu.

Planul de lecție

Deschideți în Photoshop fotografia pe care va fi înlocuit fundalul și deschideți fotografia noului fundal
Decupați vechiul fundal din fotografie
Copiați fundalul nou și inserați-l în fotografie
Reglați culorile, nivelurile

Uitați-vă la rezultatul lucrării după înlocuirea fundalului. Poza inainte si dupa.

Pregătirea pentru execuție

Dacă doriți să exersați pe aceleași fotografii, descărcați-le:

De asemenea, puteți folosi propriile fotografii sau puteți găsi altele pe Internet.

Pasul 1

Deschideți fotografiile în Photoshop. Mergeți la fotografia pe care vom înlocui fundalul.

Pasul 2

Creați o copie a stratului.

Deoarece stratul foto este blocat de editare în mod implicit, trebuie să faceți o copie a acestuia. Selectați stratul și faceți clic CTRL+J pe tastatură pentru a face o copie. Puteți ascunde stratul vechi făcând clic pe pictograma ochiului.

Lăsați stratul vechi să fie o rezervă pentru orice eventualitate, astfel încât în cazul unei erori să puteți reveni la el.

Pasul 3

Acum trebuie să selectăm oameni, și anume cuplul de îndrăgostiți din fotografie.

Vom folosi instrumentul Selecție rapidă.

Principiul funcționării sale este simplu. Folosiți o perie pentru a arăta unde să selectați, iar Photoshop creează selecția.

Începeți să scoateți în evidență oamenii. Pentru comoditate, puteți mări (țineți ALT pe tastatură și derulați cu rotița mouse-ului).

Dacă aveți o fotografie mai complexă și nu o puteți evidenția, atunci aplicați toate cunoștințele de la.

Sfat: Pentru a face selecția obiectelor mai uniformă, trebuie să modificați dimensiunea pensulei pe măsură ce lucrați.

În cele din urmă, ar trebui să evidențiați complet un cuplu.

Pasul 4

Acum scăpăm de vechiul fundal. Pentru a face acest lucru, inversați selecția pe care ați făcut-o făcând clic SHIFT+CTRL+I(sau meniu Selectați - Inversați). După aceasta, totul în jurul oamenilor sau a fundalului va fi selectat. Clic Del (Şterge) de pe tastatură pentru a elimina fundalul.

Acum oamenii apar pe un fundal transparent.

Pasul 5

Introduceți un fundal nou. Deschideți o imagine cu un fundal nou. Selectați întreaga zonă a imaginii, puteți face clic CTRL+Ași copiați făcând clic CTRL+C.

Du-te la fotografie.

Creați un nou strat sub fotografie. SHIFT+CTRL+N sau pur și simplu faceți clic pe pictograma de creare a stratului.

Acum că noul strat este creat, faceți clic CTRL+V pentru a insera o nouă imagine de fundal.

Imaginea de fundal este inserată, dar poate fi prea mare în raport cu fotografie.

Așa că faceți clic CTRL+T pentru a regla scara și a reduce imaginea la dimensiunea dorită.

Rezultatul final va fi cam așa:

Pasul 6

Totul este în regulă, dar trebuie să ajustăm ușor adâncimea de culoare a oamenilor, ca să spunem așa, pentru a o ajusta puțin la noul fundal.

Pentru a face acest lucru, selectați stratul cu persoane și faceți clic CTRL+L pentru a apela funcția Niveluri.

Întunecă puțin imaginea.

Acum fotografia cu noul fundal pare mai realistă:

Acest lucru completează manipulările noastre de inserare a unui nou fundal. După cum puteți vedea, nu este nimic complicat în acest sens și Photoshop vă va ajuta să o faceți în 5-10 minute cu multă muncă.

Dacă aveți probleme, puneți întrebări în comentarii, vă vom ajuta în fiecare caz în parte.

În această postare vă voi spune ca de obicei setați fundalul site-ului folosind HTML cod.

De asemenea, vă voi arăta un serviciu străin excelent pentru selectarea fundalurilor fără întreruperi.
În zilele noastre, setările site-ului sunt făcute mai ușoare și mai convenabile prin console CMS precum WordPress.
Poate fi necesar să schimbați șabloanele de site-uri web de vânzare, acest articol vă va ajuta în acest sens.

Dacă nu știi ce este HTML, atunci aceasta poate fi numită în general limba site-urilor sau un set de reguli prin care site-urile sunt generate.

De exemplu, vedeți o imagine pe un site web, dar în codul HTML al paginii poate arăta astfel:

Setați o culoare solidă pentru fundalul paginii.

Pentru a instala fundal de culoare solidă, trebuie să etichetați adauga atribut bgcolor.

< html >
< head >
< title >Titlul paginii.

< body bgcolor = "#ffcc00" >

Puteți lipi acest cod într-un fișier text și îl puteți salva cu extensia .html. Apoi deschideți-l cu orice browser și vedeți rezultatul.

După cum probabil ați ghicit, culoarea de fundal apare datorită codului de culoare din atribut bgcolor= „valoare”, care poate fi găsit accesând acest link.

Setarea unei imagini pe fundalul unei pagini HTML.

Pentru a setați imaginea pe fundal, puteți folosi atributul fundalîn etichetă .

< html >
< head >
< title >Titlul paginii.

< body background = "http://сайт/images/mlmsecret.jpg" >Buna ziua. Aceasta este prima mea pagină.

Este posibil să observați că atributul fundal este egală cu calea fișierului care este folosit ca fundal.

Pentru a schimba rapid fundalul sau orice imagine de pe pagină, trebuie doar să specificați noua cale către fișier folosind un editor de text.

Pentru a afla calea anterioară, trebuie să mergeți la pagina cu imaginea, faceți clic dreapta pe imagine și faceți clic pe „Copiați adresa URL a imaginii”. astfel vei vedea numele imaginii/fondului. Apoi puteți înlocui pur și simplu vechea imagine cu a dvs., folosind același nume de fișier.

Acestea au fost cele mai simple elemente de bază pentru configurare fundal în html, acum vine partea interesantă. 🙂

Browserele moderne vă permit să adăugați un număr arbitrar de imagini de fundal unui element, listând parametrii fiecărui fundal separați prin virgule. Este suficient să folosiți proprietatea universală de fundal și să specificați mai întâi un fundal pentru ea și al doilea separat prin virgulă.

Cum să întindeți fundalul pe toată lățimea ferestrei?

Pentru a scala fundalul, utilizați proprietatea background-size setați-i valoarea la 100%, apoi fundalul va ocupa întreaga lățime a ferestrei browserului. Pentru versiunile mai vechi de browsere, ar trebui să utilizați proprietăți specifice cu prefixe, așa cum se arată în exemplul 1.

Cum să adăugați o imagine de fundal la o pagină web?

Pentru a adăuga o imagine de fundal la o pagină web, setați calea către imagine în valoarea URL a proprietății de stil de fundal, care la rândul său este adăugată la selectorul de corp.

Este posibil să faci un fundal animat?

Animația este o tehnică destul de puternică care poate aduce la viață orice document, așa că nu este surprinzător faptul că tehnologia Flash, care adaugă desene animate paginilor web și, de asemenea, cele interactive, a devenit extrem de populară. Formatul grafic GIF acceptă, de asemenea, animație simplă prin schimbarea secvențială a cadrelor. Deci, folosind o imagine în acest format, este posibil să animați nu numai imagini individuale, ci și fundalul unei pagini web sau un anumit element.

În primul rând, va trebui să creați o imagine animată în format GIF, pentru care puteți utiliza Adobe Photoshop sau un alt program adecvat în acest scop. Există, de asemenea, biblioteci de fișiere animate gata făcute care pot fi folosite ca imagine de fundal. Apoi, imaginea este adăugată ca fundal folosind proprietatea stilului de fundal, așa cum se arată în Exemplul 1.

Cum se pune o imagine de fundal în colțul din dreapta jos al paginii?

Pentru a controla poziția imaginii de fundal pe pagină, se folosește proprietatea de stil de poziție de fundal, aceasta setează simultan coordonatele orizontale și verticale ale imaginii. Pentru a anula repetarea unei imagini de fundal, utilizați proprietatea background-position cu valoarea no-repeat .

Cum pot preveni repetarea fundalului?

În mod implicit, imaginea de fundal se repetă orizontal și vertical, formând un mozaic pe întreg câmpul paginii web. Cu toate acestea, acest comportament de fundal nu este întotdeauna necesar, mai ales atunci când plasați o singură imagine, așa că adăugarea unei valori fără repetare la proprietatea stilului de fundal va ajuta.

Cum pot face ca fundalul să se repete doar pe verticală?

Repetarea fundalului este de obicei necesară pentru a crea linii decorative sau degrade care sunt legate de înălțimea unui element sau a unei ferestre de pagină web. În astfel de cazuri, repetarea fundalului pe verticală oferă o imagine consistentă, indiferent de dimensiunea elementelor. Numai la început ar trebui să vă asigurați că imaginea de fundal se repetă fără cusături.