Schimbarea fundalului paginii în html. Fundal translucid folosind css

Browsere moderne vă permit să adăugați la un element număr arbitrar imagini de fundal, listând parametrii fiecărui fundal separați prin virgule. Este suficient de folosit proprietate universală fundal și specificați un fundal pentru acesta mai întâi și al doilea separat prin virgule.

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

Pentru a scala fundalul, utilizați proprietatea background-size; setați valoarea acesteia 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ă. Format grafic GIF suportă, 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.

Mai întâi trebuie să creați o imagine animată format GIF pentru ce poți folosi programul Adobe Photoshop sau altele potrivite î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 controlul poziției imagine de fundal Pagina folosește proprietatea stilului de poziție de fundal; 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. Doar mai întâi trebuie să-ți faci griji imagine de fundal repetat fără greşeală.

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 pagini html. 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ță!

Setarea unei culori de fundal și/sau a unei imagini pentru o pagină sau pentru elementul ei individual este destul de simplă. Principalul lucru este să știți unde și cum să faceți acest lucru, precum și să aveți un cod de culoare și/sau o imagine de fundal. Este posibil să înveți o mulțime de lucruri noi din acest articol, dar l-am creat special pentru începători. Prin urmare, totul va fi cât mai scurt și detaliat în același timp. Principalul lucru este că veți primi nu numai ideea generalaȘi exemple gata făcute, dar și o înțelegere a modului de a crea un fundal în HTML.

Pentru a seta fundalul în HTML, utilizați DOCTYPE intermediar

Și voi începe cu faptul că în HTML5 nu se poate seta. S-a decis să se adauge această caracteristică la CSS. Prin urmare, dacă intenționați să utilizați următoarele și doriți să obțineți un cod valid (corect), trebuie să alegeți tipul de document de tranziție. Pentru a face acest lucru, pagina dvs. web trebuie să înceapă cu următoarea linie:

Tranzitorie//RO" "http://www.w3.org/TR/html4/loose.dtd">

Cu asta din drum, să trecem la înțelegerea modului în care este creat fundalul. Și primul lucru de remarcat aici este diferența dintre culoare de fundalȘi imagine de fundal. La inceput merge culoare de fundal, care inundă totul spatiu disponibil pagina sau elementul acesteia. Suprapus peste el este o repetare imagine de fundal. Vizual, aceasta poate fi reprezentată după cum urmează:

Fundalul unui document HTML și elementele acestuia

Al doilea lucru pe care trebuie să-l știi este diferența dintre corpul documentuluiȘi element de document. Corpul documentului este indicat în codul HTML al unei pagini web prin eticheta BODY, care include întregul conținut al paginii web. Evident, fundalul corpului documentului nu poate fi transparent. Dacă fundalul corpului documentului nu este specificat, se utilizează valoarea implicită specificată în setările browserului.

Elementele paginii sunt în interiorul etichetei BODY. Este de remarcat faptul că puteți seta culoarea și/sau imaginea de fundal folosind HTML Acest lucru nu este posibil pentru toate elementele documentului. De exemplu, o imagine de fundal poate fi specificată numai pentru tabele. În mod implicit, acestea au de obicei un fundal transparent.

Atributul bgcolor pentru a crea o culoare de fundal

A întreba culoare de fundal documentul sau elementele sale folosesc atributul bgcolor, de exemplu:

ÎN în acest caz, setăm culoarea de fundal pentru întreaga pagină. Și iată un exemplu despre cum să setați culoarea de fundal pentru un tabel în eticheta TABLE:

Este de remarcat faptul că culoarea de fundal din tabel poate fi specificată pentru ambele rânduri din eticheta TR și pentru celulele acestora din eticheta TD.

Cum afli codul culorilor?

Probabil ați observat deja că culoarea în HTML este setată la o valoare specială cod, de exemplu: #ec008c . Pentru a afla codul culorii de care ai nevoie, poti folosi unul dintre editorii grafici. De exemplu, în Photoshop puteți folosi „ Instrument pentru pipetă» (Pipetă) pentru a obține culoare dintr-un punct din imagine. Apoi, trebuie să faceți clic pe culoarea rezultată pe bara de instrumente și în fereastra care se deschide „ Selector de culoare» (Selectare culoare) copiați codul de culoare.

Vă rugăm să rețineți că acest cod nu va avea semnul lire sterline (#) la început; acest semn va trebui adăugat manual.

De asemenea, puteți folosi numeroase servicii on-line, De exemplu:

• etc.

Principiul lor de funcționare este și mai simplu - clic culoarea dorităși obțineți codul acestuia.

Atributul de fundal pentru a crea o imagine de fundal

La fel ca și în cazul culorii de fundal, iar în cazul imagine de fundal, Trebuie să utilizați atribut special, și anume fundal , de exemplu:

În acest caz, setăm o imagine de fundal pentru întreaga pagină. Este de remarcat faptul că, din cauza limitării dimensiunii imaginii, se va repeta, de exemplu:

După cum puteți vedea, atunci când este repetat, tranziția între imagini este vizibilă. Prin urmare, ele sunt adesea folosite poze speciale, unde se ia în considerare acest punct.

Și iată un exemplu despre cum să setați o imagine de fundal pentru un tabel în eticheta TABLE:

Este de remarcat faptul că imaginea de fundal poate fi setată numai pentru tabel ca întreg și/sau pentru celula sa individuală. Acest lucru nu va funcționa pentru un șir.

Calea absolută și relativă către imaginea de fundal

Merită să acordați o atenție deosebită adresa imaginii de fundal. În acest caz, se utilizează o cale relativă către imagine, adică Adresa este specificată în raport cu locația fișierului imagine pentru fișierul paginii web. Această opțiune nu poate fi numită deosebit de reușită. Cel mai bine de folosit cale absolută la imagine, adică URL-ul său complet, De exemplu:

În acest caz, nu veți avea probleme asociate. Puteți citi mai multe despre asta.

Să rezumam

Utilizarea atributelor bgcolor și background este învechită, așa că pentru valabilitatea codului HTML va trebui să utilizați DOCTYPE de tranziție. Pentru sarcina culoare de fundalîn utilizări HTML coduri speciale, pe care o puteți afla în editor grafic sau folosind servicii online speciale. Imaginea de fundal este duplicată în zona alocată acesteia și se află deasupra culorii de fundal. Pentru a specifica o imagine de fundal, este mai bine să folosiți adresa URL completă. Asta e tot ce am. Vă mulțumim pentru atenție. Noroc!

ÎN fundal html nu sunt specificate pentru site, aceasta este scrisă folosind stiluri CSS, dar aceasta este doar o formalitate teoretică. Acum să aflăm cum să determinăm acest fundal.

Fundal pentru un site web sau un bloc separat

Deoarece avem nevoie de un fișier css pentru a atinge acest obiectiv, trebuie să-l creăm și să-l conectăm la html. Despre asta este scris în. După aceasta puteți începe să lucrați. În primul rând, trebuie să decideți pentru ce doriți să setați fundalul. Dacă întreaga pagină în întregime, atunci o puteți face astfel:

Corp (culoare de fundal: alb; )

Adică accesăm eticheta body, care reprezintă întreaga noastră pagină. Pentru a seta culoarea de fundal, utilizați proprietatea background-color. Dar ce se întâmplă dacă trebuie să setați fundalul la un model mai degrabă decât o culoare solidă? Atunci ar trebui să scrii așa:

Corp (imagine de fundal: url(calea spre imagine. extensie imagine))

Pentru claritate, vă propun să privim totul mai în detaliu folosind un exemplu. Pentru asta voi folosi această imagine:

De exemplu, imagine de fundal: url(comp.png) . În acest exemplu, setăm o imagine de fundal numită comp (așa am numit-o) format png, care se află în același folder cu fișierul css.
În html voi crea un bloc personalizat cu dimensiuni specifice pentru a demonstra funcționarea proprietăților CSS.

Și iată stilurile pentru el:

#ct( imagine de fundal: url(comp.png); lățime: 600px; înălțime: 400px; )

Iată ce avem:

De ce este asta? Faptul este că, implicit, browserul repetă imaginea de atâtea ori pentru a umple complet blocul. Uneori, acest lucru este necesar, de exemplu, atunci când utilizați modele fără sudură, dar în cazul nostru ar trebui să existe o singură imagine. Din fericire, acest lucru poate fi gestionat foarte ușor.

Repetați fundalul

Dacă aveți o imagine ca fundal, atunci implicit se va repeta pe orizontală și pe verticală pentru a umple întreg spațiul paginii. Pentru a elimina acest lucru, utilizați proprietatea background-repeat și valoarea sa fără repetare. Există, de asemenea, următoarele valori:

• Repeat-x – repetă numai pe orizontală
• Repet-y – numai pe verticală

Să adăugăm proprietăților fundalului nostru grafic:

Repetare de fundal: fără repetare;

Poziţie

Proprietatea background-position determină locația în care va fi plasată imaginea. Două valori sunt specificate aici - orizontal și vertical. Exemple: background-position: dreapta jos– poziție în colțul din dreapta jos, stânga sus – în colțul de jos sus (și așa în mod implicit), 250px 500px – offset din stânga colțul de sus la dreapta cu 250 de pixeli și în jos cu 500.

Să ne uităm mai bine la exemple:

Poziția de fundal: dreapta sus;

Imaginea se va muta în marginea din dreapta sus. Am dat blocului și un fundal galben pentru ca marginile acestuia să se vadă.

fundal-poziție: 50% 50%;

Imaginea a apărut exact centrată în blocul său. Da, da, acest lucru este posibil și datorită înregistrării procentuale a poziției.

fundal-poziție: 70% 20%;

Fundalul este deplasat cu 70% pe orizontală și cu 20% pe verticală.

De asemenea, este permisă specificarea unei valori negative a poziției în pixeli. Acest lucru se poate face, de exemplu, atunci când utilizați o imagine sprite mare și trebuie să puneți partea necesară a acestui sprite într-un bloc.

Blocați fundalul

De asemenea, îmi place foarte mult o proprietate numită background-attachment . Are doar două valori, iar prima este implicită (defilare). Aceasta înseamnă că, pe măsură ce derulați pagina, fundalul se va derula și, dacă utilizați o imagine fără repetare, aceasta va ajunge în cele din urmă și va fi doar o culoare solidă.

Pentru a preveni acest lucru, este specificat atașamentul de fundal: fix, iar acum fundalul nostru este fixat în siguranță. Acest lucru poate fi comparat cu modul de definire a unei poziții fixe pentru un bloc, astfel încât acesta să nu dispară din pagină atunci când este derulat.

O versiune prescurtată a tuturor acestor bunătăți

Am discutat multe proprietăți care vă permit să creați un fundal, dar dacă le folosiți pe toate, ajungeți la o înregistrare greoaie. Există o soluție foarte elegantă. Proprietatea de fundal vă permite să scrieți un spațiu separat setările necesare in aceasta ordine:
Fundal: imaginea color repeta pozitia pinului;
Și acum totul poate fi scris așa:

Fundal: url galben(comp.png) fără repetare 20% 100px;

Dacă o proprietate nu trebuie definită, atunci este pur și simplu omisă (în cazul nostru, nu am scris atașament de fundal).

O mulțime de fundaluri

Dacă aveți nevoie de mai multe imagini de fundal? Se întâmplă, ce poți face? Astăzi, CSS acceptă această caracteristică. Hai să încercăm și noi. Să luăm această pictogramă

L-am numit laptop.

Și iată codul pentru a introduce multifonul:

Fundal: url(comp.png) fără repetare 20% 100px, url(laptop.png) fără repetare 50% 50%; culoare de fundal: galben;

După cum puteți vedea, trebuie doar să puneți o virgulă după prima imagine și să introduceți setările pentru a doua. În acest caz, este mai bine să setați o culoare solidă separat.

În același mod, puteți înregistra cât mai multe imagini doriți, dar nu exagerați - prea multe grafice nu sunt foarte bune.

Aici aș dori să închei acest articol. Puteți face multe alte lucruri interesante cu fundalul, voi încerca să scriu despre ele în viitor (și am scris deja ceva - de exemplu).

Bine ati venit pe blogul meu. Continuăm să înțelegem 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 cât mai neted și 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 o imagine suplimentară document css, fără aceasta 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 unul. pagina specifică, pentru care este scris 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.

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 Evgenia Popova . 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ă în sarcina lor principală - să arate începătorului elementele de bază și să-l actualizeze.

Așa cum fiecare scriitor are propria sa viziune despre cum să scrie, tot așa 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 imagine din 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 asemenea 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 de a vă angaja la un antrenament serios, încercați 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.