Cum să faci un fundal folosind html. Setarea unui fundal perfect în HTML

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 voi folosi o pictogramă mică în limba html:

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

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

#bg( lățime: 400px; înălțime: 250px; imagine de fundal: 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 cuvântul cheie url după două puncte și apoi să 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 sunt 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;

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

Grozav, putem termina aici, deoarece acestea sunt capabilitățile de bază ale lucrului cu fundal, dar vă voi arăta încă 2 proprietăți care vă permit să obțineți mai mult control.

Prin repetare, designerii de aspect erau capabili să creeze texturi de fundal și degrade folosind o singură imagine minusculă. 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

În mod implicit, imaginea de fundal, cu excepția cazului în care 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;

Adică pe verticală totul rămâne la fel: imaginea de fundal este situată deasupra, dar pe orizontală am schimbat partea spre dreapta, adică dreapta. O altă modalitate de a seta poziția 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. Iar 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 pur și simplu reducerea imaginii, dar nu este întotdeauna posibil să faceți acest lucru. Să presupunem că este pe server și în acest moment nu există timp sau oportunitate de a-l 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 și, într-adevăr, 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 ai grija daca vrei sa nu deranjezi 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 cu o dimensiune de, să zicem, 1280 pe 200 și nu o dați o dimensiune de fundal, 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 mai mare – 1920 pixeli lățime. 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, dacă selectați corect imaginea de fundal, acest lucru nu va afecta aspectul site-ului.

Î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ă care poate fi implementată folosind css este un 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 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ă.

Introducere

Dacă nu știți încă cum să instalați un fundal pe un site web, vă va fi util să citiți acest articol. Din acesta veți învăța cum să setați o imagine ca imagine de fundal, să setați parametrii pentru afișarea acesteia sau pur și simplu să umpleți fundalul cu o anumită culoare.

CSS pentru a ne ajuta

După cum probabil ați ghicit, vom seta fundalul adăugând stiluri CSS la obiectul html. Proprietatea universală de fundal este responsabilă pentru afișarea fundalului unui element. Dacă trebuie să adăugați un fundal unui anumit element, atunci adăugați proprietăți CSS la id-ul sau clasa sa. Dacă pentru întregul site, atunci la eticheta corpului sau la identificatorul (clasa) containerului (învelișului), dacă se suprapune corpului. În acest articol, în exemple vom lucra cu elementul body.

Culoare de umplere

Să începem cu cel mai simplu lucru - umplerea cu o anumită culoare. Pentru a face acest lucru, trebuie să cunoaștem doar codul de culoare și proprietatea CSS background-color.

Corp (culoare de fundal: #000; /* Umpleți fundalul cu negru */ )

Acest cod va seta un fundal negru solid pentru site-ul dvs. Orice altă culoare poate fi selectată ca culoare de fundal prin schimbarea codului acesteia.

Dacă aplicați umplere de fundal unui anumit element, de exemplu, un titlu (h1-h6), un paragraf (p), etc., asigurați-vă că culoarea textului nu se va amesteca cu fundal și nu va pierde lizibilitatea. Utilizați proprietatea color pentru a schimba culoarea textului.

P (culoare de fundal: #000; /* Umpleți fundalul cu negru */ culoare: #fff; /* Text alb pentru un fundal negru */ )

Imagine de fundal

Imaginea de fundal pentru un element este setată folosind proprietatea background-image, care folosește calea către fișierul grafic ca valoare. Calea către fișier este specificată folosind url( ), Unde Aceasta este calea către fișierul grafic. Dacă pur și simplu specificați numele fișierului, de exemplu, url(background.png), atunci în acest caz imaginea ar trebui să fie stocată în același folder cu fișierul css.

Se recomandă să creați un folder separat pentru toate imaginile și să specificați calea absolută către fișier, de exemplu. din folderul rădăcină. Acest lucru va îmbunătăți structura site-ului dvs. și va elimina problemele dacă decideți să schimbați locația fișierului CSS în sine.

Corp ( imagine de fundal: url(/images/background.png); /* Calea absolută către imaginea de fundal background.png */ )

Dacă se folosește o imagine de fundal, se recomandă să specificați simultan o umplere de culoare (cu proprietatea culoare de fundal). În acest caz, dacă imaginea nu se încarcă (imaginea nu este disponibilă dintr-un motiv oarecare; utilizatorul a dezactivat afișarea imaginilor) sau se încarcă cu întârziere (imaginea se încarcă complet mai târziu decât pagina), atunci umplerea fundalului va fi afișat în locul imaginii sau până când se încarcă complet.

Corp ( imagine de fundal: url(/images/background.png); /* Calea absolută către imaginea de fundal background.png */ culoare de fundal: #ab11cf; /* Umpleți fundalul cu o anumită culoare */ )

Aceste două proprietăți din exemplul de mai sus pot fi combinate într-una singură folosind proprietatea generică de fundal.

Corp ( fundal: #ab11cf url(/images/background.png); /* Culoarea de umplere și calea către imaginea de fundal */ )

proprietate de fundal

Proprietatea generică de fundal vă permite să setați toate opțiunile de afișare a imaginii de fundal într-o singură linie. Să ne uităm la opțiunile disponibile.

Fundal: | moşteni

Ordinea valorilor poate fi arbitrară, iar dacă o proprietate nu este specificată, se folosește valoarea implicită.

atașament de fundal

Această proprietate determină dacă imaginea de fundal derulează împreună cu conținutul elementului. Dacă trebuie să remediați imaginea, utilizați valoarea fixă. În acest caz, imaginea va rămâne nemișcată la derularea conținutului paginii. Dacă doriți ca imaginea să se mute cu conținutul site-ului, utilizați valoarea de defilare. În mod implicit, este setat să deruleze.

Corp ( imagine de fundal: url(/images/background.png); /* Calea absolută către imaginea de fundal background.png */ background-attachment: fix; /* Imagine fixă ​​*/ culoare de fundal: #ab11cf; /* Umpleți fundalul cu o anumită culoare */ )

Echivalent:

Corp (fundal: #ab11cf url(/images/background.png) fix; /* Culoarea de umplere și calea către imaginea de fundal fixă ​​*/ )

fundal-poziție

Dacă este specificată o imagine de fundal, această proprietate determină poziția sa inițială. Are două valori separate printr-un spațiu: poziție orizontală și poziție verticală. Valorile pot fi setate folosind cuvinte cheie: stânga dreapta sus jos centru. Ordinea în care apar nu este importantă. Dacă valorile sunt specificate în procente, pixeli etc., atunci este indicată mai întâi valoarea orizontală, apoi valoarea verticală. În mod implicit, poziția este setată în colțul din stânga sus (stânga sus).

fundal-repetare

Determină modul în care se repetă imaginea de fundal. Poate fi repetat doar pe orizontală (repeat-x), sau numai pe verticală (repeat-y), sau simultan pe orizontală și pe verticală (repetare), sau fără repetări deloc (no-repeat). Valoarea implicită este repetarea.

moşteni

Folosit pentru a indica în mod explicit moștenirea proprietăților de la un element părinte.

Salutare prieteni! Am făcut recent o analiză a blogului meu pentru a găsi punctele slabe de design și am ajuns la concluzia că fundalul arată foarte slab și nu se potrivește cu schema principală de culori a site-ului în ansamblu.

Acest lucru se datorează faptului că fundalul se potrivește cu culorile principale ale șablonului, asta mă irită puțin, iar ochii îmi sunt foarte obosiți.

În acest scurt articol vă voi spune cum să faceți și să schimbați fundalul site-ului, citiți cu atenție până la sfârșit și aflați ce a rezultat din el.

Cum să faci un fundal pentru un site online

Înainte de a crea fundalul, ar trebui să înțelegeți că nu ar trebui să alegeți o imagine mare pentru aceasta, care va crea doar încărcare suplimentară asupra proiectului, drept urmare va dura mult timp pentru a încărca.

Am scris despre cum să măresc viteza de încărcare a unui blog în articolele anterioare: „” și „”.

Prin urmare, cel mai bine este să utilizați PATTERN ca imagine de fundal.

Model este o imagine mică, fără cusături, care, atunci când se repetă, formează un fundal mare care umple întreg spațiul site-ului.

Există un număr mare de moduri de a crea un fundal (model). De exemplu, puteți deschide orice motor de căutare și puteți introduce interogarea în bara de căutare „Descărcați fundal pentru site”, iar apoi petreceți mult timp răsfoind diverse site-uri în speranța de a găsi un model potrivit.

Dar cum să faci un fundal cu un minim de efort? Vă sugerez să acordați atenție selecției de servicii online care au sute de fundaluri gata făcute în baza lor, tot ce trebuie să faceți este să le editați și să le personalizați după bunul plac;

1) PatternCooler

Unul dintre cele mai mari depozite de o selecție de fundaluri. Aici puteți găsi un model de diferite texturi, puteți schimba singur parametrii de culoare și, de asemenea, alegeți unul popular din partea de sus.

Uite ce am putut alege pentru mine:

2) Stripegenerator

De asemenea, un bun generator de fundal online. Există un număr mic de setări și o bază de date destul de mare de spații libere.

Rezultatul meu:

3) BgPatterns

Un serviciu foarte interesant pentru crearea de fundaluri online. Puteți alege diferite modele (inimi, stele, cercuri) și schema de culori a fundalului creat.

Uite ce am ales pentru mine:

4) Tartanmaker

Pentru cei care doresc să creeze un fundal în carouri pentru ei înșiși, ar trebui să vizitați acest serviciu de fundal online.

Cum se schimbă fundalul pe site-urile HTML și PHP

Dacă lucrați cu un site dezvoltat exclusiv în HTML, atunci va trebui să inserați un fundal în eticheta de deschidere ... Ar trebui să arate cam așa:

Dacă modelul principal nu este încărcat, culoarea specificată în bgcolor (FFFFFF) va fi încărcată.

Practic, majoritatea webmasterilor începători și chiar avansați folosesc CMS WordPress ca motor de blog, așa că pentru a instala un fundal pe site, trebuie să încărcați modelul creat mai sus în folderul dvs. cu imagini tematice.

Pentru a face acest lucru, încarc o imagine (model) pe găzduire, folderul se află la această adresă:

/httpdocs/wp-content/themes/Prosumer/images

fundal: #FFFFFF url(images/fon-1.png) repetare;

Setări de bază:

• — repetare - imaginea se va repeta atât pe verticală, cât și pe orizontală;
• — repeat-x - repetă numai pe orizontală;
• — repeat-y - se repetă numai pe verticală;
• — no-repeat – interdicție de repetare.

Încercați, experimentați, pentru că doar așa puteți crea sau schimba fundalul care se va armoniza cel mai bine cu designul site-ului.

Urmăriți videoclipul „Cum să schimbați fundalul pe un site web” și nu ar trebui să aveți întrebări.

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 îndrăgostit 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.

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, pur și simplu schimbați 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!