La configurarea oricărui site web, pe lângă funcționalitate, designul este foarte important. Acesta este ceea ce stabilește propriul stilși designul unei anumite companii sau persoane pentru care este creat site-ul. Personalizarea culorii de fundal și a imaginii este ușoară, urmând instrucțiunile din acest articol.
Deschide-l pe al tău fișier HTML folosind notepad sau orice alt editor de text cu care sunteți obișnuit. De exemplu, să luăm o pagină web primitivă cu un minim de text. Puteți deschide fișierul folosind orice browser.
Introduceți în etichetă parametrul bgcolor=”*****”, unde ***** este codul de culoare. Puteți afla culorile pentru HTML în orice editor grafic selectând opțiunea „pentru web” sau pe site-ul web https://colorscheme.ru/color-names
- style="background-image: url(‘file:///C:/Users/FILE_PATH.jpg’)”
Vă rugăm să rețineți că utilizatorii cu rezoluție mai mare ecran, imaginea dvs. va fi duplicată în jos și în dreapta. Nu va arăta bine dacă imaginea nu este monocromatică. Există comenzi speciale pentru a corecta acest parametru.
- background-repeat: „Valoare”. Opțiunile pentru valoarea dvs. ar putea fi: „repeat-x” – repetă imaginea de fundal atât pe orizontală, cât și pe verticală. „repeat-y” – repetare numai pe verticală. „no-repeat” – imaginea este înghețată pe loc și nu se repetă. „spațiu” – întreaga pagină va fi umplută număr maxim copii ale imaginii, cele mai exterioare vor fi decupate. „rotund” – aceeași opțiune, dar marginile imaginii vor fi scalate cu atenție;
- background-attachment: „Valoare”. Dacă înlocuiți eticheta „defilare” în locul cuvântului Valoare, imaginea va derula împreună cu site-ul. „fixat” – fundalul rămâne neschimbat la derulare;
- background-size: Value Value2. Aici valorile trebuie să ia o valoare în pixeli. De exemplu: 100px 200px. Pe lângă pixeli, sunt acceptate valori procentuale. Aceasta este o opțiune pentru a umple pagina cu o imagine. Pe lângă numere, puteți introduce doi parametri: „conține” – umple pagina cu o imagine pe partea lungă și „copertă” – umple pagina cu o imagine pe lățime.
Odată ce cunoașteți elementele de bază ale umplerii unei pagini cu fundal în HTML, sunteți gata să vă creați primul site web.
27.12.14 55.8K
Orice cameră va arăta mult mai bine dacă podeaua ei este acoperită cu un covor persan scump. Deci de ce site-ul tău este mai rău? Poate că este timpul să-i „acoperiți” podeaua cu un covor elegant și scump făcut singur. Să aruncăm o privire mai atentă asupra modului de a crea un fundal pentru un site web:
Fundal pentru site
Se întâmplă că design vechi M-am saturat deja de site. Și vreau ceva nou și gustos. A design nou asa va fi daca il gatesti cu mainile tale.
Dar schimbarea completă a întregului design al unei resurse este o sarcină ingrată. Și nu mâinile tuturor sunt antrenate corespunzător pentru această sarcină. Prin urmare, este cel mai ușor de reîmprospătat șablon vechi prin schimbarea culorii de fundal a resursei sau a imaginii de fundal a acesteia.
Există mai multe moduri de a schimba fundalul pe un site web. Pentru aceasta, sunt folosite capabilitățile CSS sau html. Dar multe dintre proprietățile pentru lucrul cu fundal au același nume și metodă de aplicare în aceste tehnologii web.
Bazele lucrului cu fundaluri în html
Mai multe elemente pot fi folosite ca fundal:
- Culoare;
- Imagine de fundal;
- Imagine cu textură.
Să ne uităm la utilizarea fiecăruia dintre ele mai detaliat.
Pentru a seta culoarea fundal Pentru site se folosește proprietatea background-color a atributului style. Adică, pentru a seta culoarea principală pentru o pagină web, trebuie să o scrieți în interiorul etichetei
. De exemplu:Fundalul site-ului #55D52B
Pe lângă codul de culoare hexazecimal, este acceptată o valoare în format cheie sau RGB. Exemple:
Fundal rgb pentru site-ul web(23,113,44)
Fondul site-ului verde
Setarea culorii de fundal folosind cuvinte cheie are o serie de limitări în comparație cu celelalte două metode.
HTML acceptă doar 16 cuvinte cheie pentru a seta culori. Iată câteva dintre ele: alb, rosu, albastru, negru, galben si altii.
Prin urmare, pentru a seta fundalul pentru un site html, este mai bine să utilizați formatul hexazecimal sau RGB.
Pe lângă selecția culorilor, sunt disponibile și alte opțiuni de personalizare. Dacă proprietatea background-color este setată la transparent , fundalul paginii va deveni transparent. Acesta este sensul această proprietate atribuite implicit.
Acum să ne uităm la capacitățile de instalare ale limbajului hipertext imagine de fundal pentru site. Acest lucru se poate face folosind proprietatea background-image.
După cum puteți vedea din cod, imaginea este legată prin calea URL specificată în paranteze. Dar nu toate imaginile sunt atât de mari încât dimensiunea lor umple întreaga zonă a ecranului. Să vedem cum va fi afișată imaginea mai mică.
Să presupunem că dezvoltăm un site web despre poezie și trebuie să folosim o imagine a lui Pegas ca fundal. Calul înaripat va personifica libertatea gândirii creatoare a poetului!
Avem nevoie ca imaginea să fie afișată în mijlocul ecranului o dată. Dar, din păcate, browserul nu înțelege dorințele noastre înalte. Și afișează o imagine mai mică pentru fundalul site-ului de câte ori poate găzdui zona ecranului:
Poate că patru cai zâmbitori cu aripi vor fi prea multă inspirație pentru poeți. Prin urmare, interzicem clonarea Pegasului nostru. Facem acest lucru folosind proprietatea background-repeat. Valori posibile:
- repeat-x – repetă imaginea de fundal pe orizontală;
- repetare-y – pe verticală;
- repetă – pe ambele axe;
- no-repeat – repetarea este interzisă.
Dintre opțiunile enumerate, ne interesează ultima. Înainte de a schimba fundalul site-ului, îl folosim în codul nostru:
Dar, bineînțeles, ar fi mai bine dacă fluturașul nostru s-ar afla în mijlocul ecranului. Proprietatea background-position este destinată tocmai poziționării imaginii de fundal pe pagină. Puteți seta coordonatele locației în mai multe moduri:
- Cuvânt cheie ( sus, jos, centru, stânga, dreapta);
- Procent – numărarea începe din colțul din stânga sus;
- În unități de măsură (pixeli).
Să profităm de cel mai mult varianta simpla centrare:
Se întâmplă că trebuie să remediați poziția unei imagini atunci când derulați. Prin urmare, înainte de a face o imagine ca fundal al site-ului, utilizați proprietatea specială background-attachment . Valorile pe care le accepta sunt:
- sul;
- fix.
Avem nevoie de ultima valoare. Acum codul nostru exemplu va arăta astfel:
Textura de fundal a site-ului web
În primul exemplu am folosit un peisaj deșert mare și frumos pentru fundal. Dar trebuie să plătești integral pentru o asemenea frumusețe. Greutatea imaginii realizate în calitate superioară, poate ajunge la câțiva megaocteți.
Acest volum nu afectează în niciun fel viteza de încărcare a paginii a browserului cu o conexiune la Internet de mare viteză. Dar ce zici internet mobil, care va dura mult timp pentru a încărca mai mulți „metri”?
Pentru a crea un site web, o întrebare importantă este cum să faci un fundal în html. Această procedură implică utilizarea anumitor etichete - cuvinte de cod si scrisori. Datorită lor, puteți pune fundal diferit, faceți-l monocromatic - completați-l sau puneți orice imagine în locul fundalului. Asemenea acțiuni vor fi foarte utile pentru toți designerii de layout și pentru cei care decid să-și „imbrace” site-ul pe cont propriu.
Realizarea fundalului
Înainte de a crea fundalul html pentru site-ul web, trebuie să îl deschideți editor de text cod html pagini. Trebuie să rețineți că etichetele de pe pagină sunt plasate vertical. Apoi, între etichete
… , trebuie să puneți o etichetă- aceste etichete sunt necesare pentru a clarifica stilul elementelor unei anumite pagini web. Pe locul de trei punctele trebuie scrise - corp (fond:) . Acesta este un parametru care vă permite să setați stiluri diferite pentru fundalul paginii. Puteți efectua operația de setare a culorii în două moduri. Primul:Corp (background:#000000) – fundalul paginii ar trebui să fie acum negru.
Această metodă este, de asemenea, potrivită pentru setarea atât a unei culori, cât și a unei imagini ca fundal. După două puncte puteți pune fie un cod de culoare, fie un link către imagine. Sau puteți folosi o metodă care înseamnă doar setarea unei culori - o umplere specifică pentru pagină. După două puncte trebuie să scrieți așa-numitul parametru – culoare. Și după el, pune codul culorii în sine. Această metodă este bună dacă o folosiți ca șablon. Notează-l și salvează-l, iar când este necesar, stabilește o culoare și pune-o pe pagină.
Poti pune in schimb fundal simplu, poza. Dacă trebuie să aflați: în html, cum să faceți o imagine ca fundal, atunci operațiuni similare trebuie făcute. Scrieți etichete, puneți corpul (fond: link către imagine). Trebuie să ne amintim că imaginea în sine poate fi oriunde. Și pe un site web de pe Internet, dar cel mai bine este să creați un folder în rădăcina documentului. În folderul în care vor fi salvate toate informațiile despre pagina site-ului, trebuie să creați altul - pentru imagini. Operația va arăta astfel:
Acum poza pe care ați ales-o va fi fundalul întregii pagini a site-ului. Sperăm că înțelegeți cum să faceți un fundal în html. Doar încercați și totul va funcționa cu siguranță!
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 culoare de fundal, dar este foarte incomod.
În consecință, vom folosi Cascading Style Sheets (CSS). Sunt multe mai multe posibilitati pentru a seta fundalul. 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, formate rgb, rgba, 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 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 și apoi în parantezele specificați calea către fișier. ÎN î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 multe motive comune că 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 - acestea sunt repetate pe verticală și pe orizontală atâta timp cât se 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, un gradient 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 partea stângă colțul de sus blocul tă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:
poziție de fundal: 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 spre dreapta, adică 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%;
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 o valoare de 80% 20%, atunci puteți concluziona imediat că imaginea de fundal va fi deplasată mult spre dreapta, dar nu va scădea 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%;
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ă 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 ș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%;
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 cu o dimensiune de, să zicem, 1280 pe 200 și nu o dați o dimensiune de fundal, apoi vor apărea ecrane cu o lățime mai mare loc 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. Acest bun venit, care ar trebui folosit, dar acum vă veți confrunta cu problema că utilizatorii cu lățimea ecranului de 1920 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. Numai decizia corectă aici va folosi 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 decupat treptat, dar, în același timp, cu o selecție adecvată a imaginii de fundal, 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ță, format rgba nu este diferit, este adăugat doar un singur parametru - canalul alfa. Valoarea poate fi de la 0 la 1, unde 0 este transparența completă.
În această postare vă voi spune ca de obicei setați fundalul site-ului folosind HTML cod.
Îți voi arăta și un excelent serviciu strain prin selecție fundaluri fără sudură.
Î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 acest cod Introdu in fisier textși salvați 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 Metoda nouaîn fișierul dvs. 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 pur și simplu să înlocuiți 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ă. 🙂
