Imagine de fundal în html. Imagine de fundal. Cum să faci fundalul să se repete doar pe verticală
Vlad Merjevici
Datorită particularităților paginilor web, imaginile de fundal joacă un rol semnificativ în aspectul documentelor site-ului. În același timp, ei sunt implicați activ într-o varietate de lucruri, de exemplu, automatizarea procesului de atașare a imaginilor la text, crearea de tranziții în gradient și, desigur, adăugarea unui fundal sub conținut. Mai jos sunt câteva aspecte ale utilizării imaginilor de fundal.
Fundal pe o pagină web
Setarea unei imagini de fundal pentru o pagină web are loc în mod tradițional prin atributul de fundal al etichetei.
. Acest model se repetă pe orizontală și pe verticală, umplând astfel întreaga fereastră a browserului. Este clar că nu există opțiuni speciale pentru creativitate aici, așa că hai să ne întoarcem la stiluri și să vedem ce se poate face folosind CSS.CSS are cinci atribute care controlează imaginea de fundal: adăugarea, poziția și repetarea acesteia. Cu toate acestea, toți acești parametri sunt înlocuiți cu o proprietate universală, fundal, pe care o vom folosi în viitor.
Adăugarea unui tapet
Adăugarea unei imagini are loc prin setarea adresei imaginii folosind cuvântul cheie url. Pentru a controla repetarea unei imagini, se folosesc argumentele no-repeat, repeat-x (repetare orizontală) și repeat-y (repetare verticală). Datorită acestui lucru, puteți obține pagina web prezentată în Fig. 1.
Pentru a seta o imagine pe o pagină web, trebuie să adăugați o proprietate de stil de fundal la selectorul BODY, așa cum se arată în Exemplul 1.
Exemplul 1: imagine de fundal
În acest exemplu, graficul target.gif este definit ca fundalul paginii web fără a repeta imaginea. Pentru a preveni ca imaginea să se potrivească strâns la marginile browserului, aceasta este deplasată cu 30 de pixeli la dreapta și cu 20 de pixeli în jos față de poziția inițială.
Repetarea unui model
Datorită faptului că puteți seta modelul de fundal să se repete orizontal sau vertical, sunt disponibile mai multe opțiuni pentru proiectarea paginilor web. De exemplu, pentru a crea o dungă verticală de-a lungul marginii din stânga (Fig. 2), veți avea nevoie de imaginea prezentată în Fig. 3.
Designul trebuie să fie astfel încât să se potrivească pe verticală fără cusături vizibile și, de asemenea, să formeze un singur întreg cu culoarea de fundal specificată a paginii web. Exemplul 2 arată cum să creați o astfel de imagine de fundal, folosind din nou proprietatea de fundal și valoarea sa de repetare.
Exemplul 2. Repetarea fundalului pe verticală
În mod similar, puteți repeta fundalul pe orizontală, de exemplu, creând un gradient și setându-l ca imagine de fundal (Fig. 4).
Pentru a obține pagina web prezentată în Fig. 4, mai întâi va trebui să faceți o imagine cu o tranziție în gradient. Lățimea este suficientă pentru a specifica 20-40 pixeli, iar înălțimea imaginii depinde de scopul documentului și de înălțimea așteptată a conținutului paginii web. De asemenea, nu uitați că un desen mare va crește dimensiunea fișierului grafic. Și acest lucru va afecta negativ viteza de încărcare și, în cele din urmă, va duce la afișarea mai lentă în fundal. Pentru acest caz, o imagine de 30x200 pixeli era destul de potrivită (Fig. 5).
Exemplul 3 arată codul HTML pentru a crea un fundal gradient.
Exemplul 3: Repetare pe fundal orizontal
Un design gradient se potrivește bine cu un bloc de culoare solidă, așa că în acest exemplu adăugăm un strat pentru a afișa conținutul paginii web.
Adăugarea unei imagini la text
Folosind o imagine de fundal, puteți automatiza procesul de adăugare a elementelor grafice unui anumit text, cum ar fi titluri. Pentru a face acest lucru, utilizați proprietatea universală de fundal, care este aplicată selectorului dorit. Valoarea este calea către imagine și, pentru ca aceasta să nu se repete, argumentul fără repetare (exemplul 4).
Exemplul 4: Adăugarea unei imagini
Titlu
Textul principal
După cum se arată în acest exemplu, desenul poate fi mutat orizontal și vertical din poziția inițială, implicit acesta este colțul din stânga sus al elementului bloc. Deplasarea fundalului vă permite să poziționați imaginea în raport cu textul în modul dorit. Pentru a preveni suprapunerea textului cu imaginea, trebuie să adăugați proprietatea padding-left, datorită căreia textul este deplasat la dreapta cu distanța specificată. Este individual în fiecare caz și este de obicei egal cu lățimea imaginii plus spațiul dorit dintre imagine și text.
La configurarea oricărui site web, pe lângă funcționalitate, designul este foarte important. Acesta este ceea ce stabilește propriul stil și design al unei anumite companii sau persoane pentru care este creat site-ul web. Personalizarea culorii de fundal și a imaginii este ușoară, urmând instrucțiunile din acest articol.
Deschideți fișierul 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ă pentru utilizatorii cu o rezoluție mai mare a ecranului, 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ă cu numărul maxim de 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 loc de cuvântul Valoare, imaginea va derula împreună cu site-ul. „fixat” – fundalul rămâne neschimbat la derulare;
- background-size: Valoare 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.
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 un fundal 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:
< 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 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;
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 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 diferite moduri. O opțiune este să indicați pur și simplu părțile în care ar trebui să fie amplasată imaginea:
fundal-poziție: dreapta sus;
fundal - poziție: dreapta sus; |
Adică pe verticală totul rămâne la fel: imaginea de fundal este situată deasupra, dar pe orizontală am schimbat partea în dreapta, adică în dreapta. O altă modalitate de a seta 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%;
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 spre 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%;
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 să reduceți pur și simplu imaginea, 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%;
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ă imaginea de fundal este selectată corect, 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ă.
17.10.2015
Nu încă
Salutare tuturor!
Să continuăm să învățăm elementele de bază ale HTML.
În această lecție vă voi spune și vă voi arăta exemple cum să faci un fundal dintr-o culoare sau imagine dintr-o pagină HTML.
Este destul de simplu!
Să începem cu culoarea!
Cred că nu ați ratat-o, unde v-am spus cum să schimbați culoarea textului și la sfârșitul articolului am dat coduri pentru diverse culori și nuanțe. De ce ți-am amintit de această lecție? Da, pentru că există un tabel cu coduri de culoare gata făcute, ia-le și exersează-le imediat în această lecție.
Deci, cum să faci o culoare de fundal în HTML...
Culoare de fundal în HTML
Culoarea implicită de fundal într-un document HTML este albă. Cum să setați culoarea după cum doriți?
Atributul „bgcolor” ne va ajuta în acest sens. Pentru a picta fundalul, adăugați acest atribut la eticheta „corp”:
Sau cam asa:
Iată codul HTML complet:
Rezultatul va fi astfel:
Dacă doriți să faceți un fundal dintr-o imagine, adăugați atributul „background” la eticheta „body”:
Completați orice imagine unde se află pagina dvs. web (în exemplul meu, pagina se numește „fon” cu extensia „.gif”):
Iată codul HTML complet:
Rezultatul va fi astfel:
Dacă imaginea de fundal se află în folderul imagini sau în alt folder, va arăta astfel:
Iată codul HTML complet:
Asta e tot pentru azi! Cred că lecția nu a fost grea și ai înțeles totul. Dacă aveți întrebări, scrieți în comentarii.
Vă aștept cu nerăbdare la următoarele lecții.
Postarea anterioară
Următoarea intrare
Etichetă img- gol, conține atribute și nu are etichetă de închidere.
Atributul este folosit pentru a afișa o imagine pe pagină src. Sr a venit de la sursă, ceea ce înseamnă Sursă. Valoarea atributului src este url Imagini.
Linia de mai sus înseamnă că imaginea se află în același director (dosar) ca și fișierul html care face legătura cu această imagine. Să presupunem că aveți un folder html, care contine index.html cu codul de mai sus și imaginea însăși cu titlul imagine.jpg.
În acest caz, la deschidere index.html Veți vedea această imagine în browserul dvs. Dacă îl aveți în altă parte (un folder mai sus sau mai jos), atunci veți vedea fie un câmp alb, fie un dreptunghi mic cu o cruce roșie (imaginea nu a putut fi încărcată).
Imaginile nu sunt întotdeauna localizate în același director (dosar) ca fișierul în sine, așa că specificarea căilor va fi descrisă mai în mod specific puțin mai târziu.
atributele etichetei img
Pe lângă src, eticheta img are și alte atribute care sunt responsabile pentru dimensiunea imaginii afișate, legenda acesteia și așa mai departe. 
src- adresa imaginii
lăţime- latimea imaginii
înălţime- înălțimea imaginii
titlu- semnătură care apare când treci cu mouse-ul peste imagine
alt- text alternativ. Necesar pentru robotul de căutare și indexarea imaginilor
frontieră- grosimea marginii imaginii. 0 - fără chenar, 1 - chenar cel mai subțire etc.
Adresa imaginii inserate (exemple)
De obicei, Imagini nu sunt stocate în același folder cu fișier html. În acest scop, se creează un folder în același director imagini(sau img, in functie de gust si culoare). Și toate imaginile necesare sunt deja plasate în el. În cazul stocării separate, va trebui să specificați o adresă diferită pentru atributul src 
Dacă fișierul se află în folderul de mai sus, atunci așa
De asemenea, puteți insera o imagine de pe alt site cu totul, fără a o descărca în folderul dvs. Pentru a face acest lucru, trebuie să aveți o conexiune la Internet stabilă și aproximativ următorul cod, în care introduceți adresa imaginii de pe Internet în adresa:
Imagine de fundal în HTML
La fel de imagine de fundal fișierele cu extensii pot fi gif, jpg, jpegȘi png. Dacă dimensiunea imaginii este mai mică decât fereastra browserului, imaginea va continua automat să umple fundalul rămas. ÎN corp utilizați atributul fundal, în care specificăm calea către imagine
