Cum se face un fundal de imagine în HTML și CSS. 3 moduri simple

Setează culoarea planului din spate din paletă. Culoarea moștenitorului coincide întotdeauna cu culoarea elementului strămoșului.
Salutari. În acest articol, vreau să spun aproximativ trei moduri de a plasa o imagine ca fundal a întregii pagini folosind numai HTML + CSS (fără a utiliza JS).

Salutari. În acest articol, vreau să spun aproximativ trei moduri de a plasa o imagine ca fundal a întregii pagini folosind numai HTML + CSS (fără a utiliza JS).

Deci, cerințele pentru imaginea de fundal suntem după cum urmează:

  • 100% lățime și pagini Înălțimea acoperită
  • Cântarele de fundal dacă este necesar (fundalul este întins sau comprimat în funcție de dimensiunea ecranului)
  • Lipiți proporțiile imaginilor (raport de aspect)
  • Imaginea centrată pe pagină
  • Fundalul nu provoacă suluri
  • Soluția este transfrontalieră maximă
  • Nu se utilizează alte tehnologii, cu excepția CSS

Setează culoarea planului din spate din paletă. Culoarea moștenitorului coincide întotdeauna cu culoarea elementului strămoșului.

Metoda 1.

În opinia mea, acesta este cel mai bun mod, pentru că este cel mai simplu, concis și modern. Utilizează proprietatea CSS3 Fundal-dimensiune. pe care le aplicăm la etichetă HTML. . Exact HTML. , dar nu Corp. deoarece Înălțimea sa este mai mare sau egală cu înălțimea ferestrei browserului.

Instalați un fundal fix și centrat, apoi ajustați dimensiunea acestuia utilizând Dimensiune fundal: capacul .

HTML { 

Imagine de fundal: URL (imagini / fundal.jpg);

Fundal-Repeat: No-Repeat;

Poziție de fundal: centru centru;

Fundal-atașare: fix;

-Webit-fundal-dimensiune: capac;

-Moz-fundal-dimensiune: capacul;

-O-fundal-dimensiune: capac;

Dimensiune de fundal: acoperire; 
} 

Demo.

Această metodă funcționează în

  • Chrome (orice versiune)
  • Opera 10+.

Firefox 3.6+.

Safari 3+.

Adică 9+.

Pentru ca imaginile să se încarce rapid, plasați-vă site-urile doar de la furnizorii de găzduire dovediți, de exemplu, beget.com 
Utilizatorii și motoarele de căutare iubesc site-urile rapide. 

Imagine de fundal: URL (imagini / fundal.jpg);

Metoda 2.

Această metodă asigură utilizarea elementului IMG, a căror dimensiune va varia în funcție de dimensiunea ferestrei browserului. Pentru a întinde imaginea pe ecran complet, trebuie să setați min-înălțimea și lățimea cu o valoare de 100%. Și astfel încât imaginea nu este comprimată la dimensiunea mai mică decât originalul, instalați min-lățimea cu valoarea lățimii egale a imaginii.

Dacă lățimea ferestrei este mai mică decât lățimea imaginii, interogarea media va fi utilizată pentru a alinia fundalul din centru.

moşteni.

<img src = "/ imagini / fundal.jpg" clasa = "fundal" />

img.background { Min-înălțime: 100%; Min-lățime: 640px; Lățime: 100%; Înălțime: Auto;

Poziție: fixă; Top: 0; stânga: 0;

/ * Depinde de dimensiunea imaginii * /

@Media ecran și (max-lățime: 640px) { img.bg { и Stânga: 50%; Marja-stânga: -320px; } } } Demo.

Moștenește toate caracteristicile elementului părinte

Această metodă funcționează în:

Orice versiuni ale browserelor bune (Chrome, Opera, Firefox, Safari) Adică 9+. и Metoda 3. . O altă modalitate este după cum urmează: Fixați imaginea <img /> în colțul din stânga sus al paginii și întindeți-l utilizând proprietățile min-lățime și înălțime minime de 100%, menținând în același timp raportul de aspect. Adevărat, cu această abordare, imaginea nu este centrată. Dar această problemă este rezolvată de imaginea în <div />, pe care o facem de 2 ori dimensiunea ferestrei. Și imaginea însăși ne întindem și punem în centru. <Clasa Div = "fundal"> <img src = "/ imagini / fundal.jpg" />

</ div> Div.background { <Clasa Div = "fundal"> Poziție: fixă;

Top: -50%;

Stânga: -50%; } Lățime: 200%; Înălțime: 200%; }

img { Poziție: absolută; Top: 0;

stânga: 0; Dreapta: 0; :

Partea de jos: 0;

Marja: Auto; Min-lățime: 50%; Min-înălțime: 50%; } .

Această metodă funcționează în browsere bune și IE 8+.

Sper că aceste informații vor fi utile pentru dvs. Personal, adesea folosesc aceste metode, mai ales mai întâi. Desigur, există și alte modalități de a pune o imagine pe fundalul din spate cu CSS. Dacă știți despre ele, împărtășiți, vă rugăm să comentarii. Setați culoarea de fundal și / sau o imagine pentru o pagină sau un element separat este suficient de simplu. Principalul lucru este să știți unde și cum se poate face, precum și să aveți un cod de culoare și / sau o imagine de fundal. Este posibil ca din acest articol să înveți multe lucruri noi, dar l-am creat în mod specific pentru începători. Prin urmare, totul va fi cât mai scurt posibil și în detaliu simultan. Principalul lucru este că veți primi nu numai prezentarea generală și exemplele gata, ci și înțelegerea modului de a face un fundal în HTML. Pentru a seta fundalul în HTML utilizați DOCTYPE intermediară Și voi începe cu faptul că HTML5. Nu există posibilitatea de a seta fundalul site-ului. Această caracteristică a fost decisă să sufere în CSS. Prin urmare, dacă intenționați să utilizați mai jos și doriți să obțineți o valoare validă » (corect) Cod, trebuie să stați la tipul de tranziție al documentului. Pentru a face acest lucru, pagina dvs. web ar trebui să înceapă cu următoarea linie: <! Doctype html public "- // w3c // dtd html 4.01 » Tranziție // en "" http://www.w3.org/tr/html4/loose.dtd ">

Timpul pentru clase practice

Cum este fundalul pe o pagină web? (#)Dacă ați dat seama, să înțelegem cum este creată fundalul. Și primul lucru aici ar trebui notat - aceasta este diferența dintre

Culoare de fundal

Imagine de fundal

. La început merge

Culoare de fundal Stânga: 50%; care inundă tot spațiul de pagină disponibil sau elementul său. Repetat deasupra imagine de fundal }

. Din punct de vedere vizual, acest lucru poate fi descris după cum urmează: Poziție: absolută; Top: 0;

Fundal de document HTML și elementele sale

După dezamăgirea elementelor principale ale controlului fundalului, precum și atributele acestora, procedați direct la analiza unui exemplu specific. În codul programului prezentat mai jos, am încercat să activez toate elementele descrise.

Al doilea lucru pe care trebuie să-l cunoașteți este diferența dintre

corpul documentului Dreapta: 0; :

element al documentului

Corpul documentului

indicată în codul HTML al etichetei paginii web

Corp. care include tot conținutul paginii web. Evident, fundalul documentului documentului nu poate fi transparent. Dacă fundalul corpului documentului nu este specificat, se utilizează valoarea implicită specificată în setările browserului. Elemente de pagină sunt în interiorul etichetei }

. Este demn de remarcat faptul că puteți seta imaginea de culoare și / sau fundal utilizând HTML la toate elementele documentului. De exemplu, imaginea de fundal poate fi specificată numai pentru tabele. În mod implicit, acestea au de obicei un fundal transparent. Poziție: absolută; Top: 0;

Atribut Bgcolor pentru a crea culoarea de fundal

Pentru a întreba

Documentul sau elementele sale sunt atribute Înălțime: 200%; и imagine de fundal Bgcolor. , de exemplu: <Corp bgcolor = "# EC008C">

<! - Corpul documentului ->

</ Corp>

În acest caz, am stabilit culoarea de fundal pentru pagină ca întreg. Dar un exemplu de cum să setați culoarea de fundal pentru masă, în etichetă Masa <Tabel bgcolor = "# EC008C"> <tr> <td> text cu fundal </ td> </ tr> </ table>

Este demn de remarcat faptul că culoarea de fundal din tabel poate fi de asemenea specificată pentru rânduri în etichetă

Tr. Și pentru celulele lor în etichetă TD.

Cum să aflați codul de culoare? Probabil ați observat deja că culoarea din HTML este setată la special cod HTML. , de exemplu:

# EC008C.

  • . Pentru a afla codul de care aveți nevoie de culoarea, puteți utiliza unul dintre editorii grafică. De exemplu, în Photoshop puteți utiliza "
  • Instrumentul Eyedropper.
  • (Pipetă)

Pentru a obține o culoare dintr-un punct din imagine. Apoi, trebuie să faceți clic pe culoarea rezultată din bara de instrumente și în fereastra care se deschide "

Selector de culoare. (Selecție de culoare) Copiați codul de culoare. Îți atrag atenția asupra faptului că acest cod va fi fără un semn de lattice La început, acest semn va trebui să fie adăugat manual.

De asemenea, puteți utiliza numeroase servicii online, de exemplu: 
Principiul lor de lucru este chiar mai ușor - faceți clic pe culoarea dorită și obțineți codul IT. Atribute fundal pentru a crea o imagine de fundal Precum și în cazul culorii de fundal și în cazul
Trebuie să utilizați un atribut special, și anume 
fundal. 
<corpul corpului = "/ 2014/06 / bg.jpg">

В HTML. În acest caz, punem imaginea de fundal pentru pagină ca întreg. Este demn de remarcat faptul că, datorită limitărilor dimensiunii imaginii, acesta va fi repetat, de exemplu: După cum vedeți, când repetarea, tranziția dintre imagini este vizibilă. Prin urmare, fotografiile speciale sunt adesea folosite, unde acest moment este luat în considerare. Dar un exemplu de a seta o imagine de fundal pentru o masă, în etichetă

<Table Background = "/ 2014/06 / bg.jpg"> <tr> <td> Text cu fundal </ TD> </ tr> </ table> HTML. Este demn de remarcat faptul că imaginea de fundal poate fi setată numai pentru tabel ca un întreg și / sau celula separată. Pentru un șir nu va funcționa. Atribute fundal pentru a crea o imagine de fundal .

Calea absolută și relativă spre imaginea de fundal (Selecție de culoare) În mod separat, merită acordată atenție Adresa de fundal imagine . În acest caz, se folosește calea relativă la imagine, adică. Adresa este indicată în locația fișierului imagine în fișierul de pagină Web. Această opțiune nu poate fi numită deosebit de succes. Cel mai bine este să utilizați calea absolută la imagine, adică

URL-ul său complet <background background = "/ imagini / bg.jpg"> .

În acest caz, nu veți avea probleme concomitente. Pentru mai multe despre el puteți citi aici.

Să ne rezumăm 
Folosind atributes. Moral depășit, deoarece pentru validitatea codului HTML va trebui să utilizați tranziția Doctype.

. Pentru a seta culoarea de fundal în HTML, utilizează coduri speciale pe care le puteți afla într-un editor grafic sau folosind servicii speciale online. Imaginea de fundal este duplicată în cozile zonei alocate și se află pe partea superioară a culorii de fundal. Pentru a specifica o imagine de fundal, este mai bine să utilizați adresa URL completă. Am totul pe asta. Multumesc pentru atentie. Noroc!

Link scurt: http://goo.gl/03tsnz Cum se face un fundal pentru site? Orice cameră va arăta mult mai bine dacă podeaua ei se ridică dragi covor persan. Atât de rău site-ul dvs.? Poate că este timpul și podeaua lui " a stabilit
  • »Palatul scump elegant manual. Vom înțelege mai multe despre cum să facem un fundal pentru site:
  • Se întâmplă că vechiul design al site-ului a venit deja. Și vreau ceva nou și gustos. Și noul design va fi așa dacă îl gătești cu mâinile tale.
  • Dar pentru a schimba complet tot designul resurselor - lucrul este nerecunoscător. Da, și nu toată lumea are nimic despre asta.
  • ascuțit

"Mâinile. Prin urmare, este mai ușor să reîmprospătați vechiul șablon, schimbând culoarea fundalului resursei sau imaginea de fundal.

Există mai multe modalități de a schimba fundalul de pe site. Aceasta utilizează oportunități. 
Css. sau . Dar multe dintre proprietățile de lucru cu fundalul au același nume și metodologie de aplicare în aceste tehnologii web.
  • Ca fundal, puteți utiliza mai multe elemente: Culoare; ;
  • Imagine de fundal;
  • Imagine texturală. Ne vom ocupa de utilizarea fiecăruia în detaliu. Pentru a seta culoarea fundalului din spate pentru site, proprietatea este utilizată.

culoare de fundal.

Atribut de stil. 

Stil. . Aceasta este, pentru a seta culoarea de bază pentru pagina web, trebuie să îl înregistrați în interiorul etichetei <corp>. De exemplu: <Stil corpul = "fundal-culoare: # 55d52b"> <p> fundal al site-ului # 55d52b </ p> </ corp>

În plus față de codul de culoare hexazecimal, valoarea este acceptată în formatul de cuvinte cheie sau

RGB. 

. Exemple:

<Stilul corpului = "Culoare de fundal: RGB (51,255,153)"> <p> Fundalul site-ului RGB (23,113,44) </ p> </ corp> <Stil corpul = "fundal-culoare: verde"> <p> fundal de site-ul verde </ p> </ corp> Setarea culorii de fundal utilizând cuvintele cheie are o serie de restricții comparativ cu celelalte două căi.

Total 16 cuvinte cheie sunt acceptate pentru setarea culorii. Aici sunt câțiva dintre ei:

Alb, roșu, albastru, negru, galben alte. Prin urmare, pentru a seta fundalul site-ului

Este mai bine să utilizați formatul hexazecimal sau 

În plus față de selectarea culorii, sunt disponibile alte setări. Dacă este proprietate Valoarea stabilită Transparent

Fundalul paginii va deveni transparent. Această valoare este atribuită acestei proprietăți în mod implicit. Acum, luați în considerare posibilitatea unei limbi hipertext pentru a instala modelul de fundal pentru site. Este posibil să faceți utilizarea proprietății. imagine de fundal.

Exemplu: 

<Stilul corpului = "Imaginea de fundal: URL (img_1809.jpg)"> </ corp>

După cum se poate observa din cod, legarea imaginii are loc prin calea

URL.

Postat în paranteze. Dar nu toate imaginile se dovedesc a fi atât de mari pentru a umple întreaga zonă a ecranului cu dimensiunile lor. Să vedem cum va fi afișată cifra mai mică.

Să presupunem că dezvoltăm un site despre poezie și ca un substrat trebuie să utilizați imaginea Pegasus. Calul înaripat va personifica libertatea de gândire creativă a poetului!

Avem nevoie de faptul că imaginea este afișată o dată în mijlocul ecranului. Dar, din păcate, browserul nu înțelege dorințele noastre sublime. Și afișează o imagine mai mică pentru fundalul site-ului de câte ori pe care zona de ecran îl poate găzdui:

Probabil că patru cai zâmbitori cu aripi de poeți vor fi prea mult pentru inspirație. Prin urmare, interzice clonarea Pegasusului nostru. Folosiți proprietatea

Repetarea fundalului. . Valorile posibile: repetați-X - repetarea imaginii de fundal orizontal;

Deci, facilităm sarcina de a seta fundalul din spate din două imagini: animație și imagine obișnuită. În acest caz, animația GIF va fi fixată, iar desenul este derulat împreună cu conținutul paginii.

Repetați-y - vertical;

Repetați - pe ambele axe;

Repetarea fără repetare este interzisă.

Printre opțiunile enumerate suntem interesați de ultimul. Înainte de a schimba fundalul site-ului, îl folosim în codul dvs .:

<Stilul corpului = "Imaginea de fundal: URL (3.jpg); fundal-repetare: No-repetat"> </ corp>

Dar, desigur, este mai bine dacă placa noastră este localizată în mijlocul ecranului. Proprietate

Poziția de fundal Doar este destinat să poziționați modelul de fundal pe pagină. Setați coordonatele locației în mai multe moduri:
. Aceasta este, pentru a seta culoarea de bază pentru pagina web, trebuie să îl înregistrați în interiorul etichetei <corp>. De exemplu: Cuvânt cheie (
<background background = "/ imagini / bg.jpg"> Top, fund, centru, stânga, dreapta)
sau Procente - numărătoarea inversă începe din colțul din stânga sus;
Orice cameră va arăta mult mai bine dacă podeaua ei se ridică dragi covor persan. Atât de rău site-ul dvs.? Poate că este timpul și podeaua lui " În unități de măsură (
(Selecție de culoare) Pixeli
). Folosim cea mai ușoară opțiune pentru centrarea:

<Stilul corpului = "Imaginea de fundal: URL (3.jpg); fundal-repetare: No-repetare; poziția de fundal: centru de sus"> </ corp>

Se întâmplă că trebuie să rezolvați poziția desenului atunci când derulați. Prin urmare, înainte de a face o imagine a site-ului, utilizați o proprietate specială.

fundal-atașament.

. Valori valide: <ul> <li> Scroll; </ li> <li> fix. </ Li> </ ul>

Avem nevoie de ultimul înțeles. Acum, codul exemplului nostru va arăta astfel: [/ html] 
<Body Style = "Imaginea de fundal: URL (3.jpg); Fundal-Repeat: No-Repeat; Poziție de fundal: centru de sus; fundal-atașare: fix"> </ corp> 

În primul exemplu, pentru fundal, am folosit un peisaj de deșert mare și frumos. Dar pentru o astfel de frumusețe trebuie să plătiți complet. Greutatea imaginii efectuată în calitate superioară poate ajunge la mai multe megaoctete.

Acest volum nu afectează viteza de descărcare a paginii browserului cu conexiune de mare viteză cu Internetul. Dar ce zici de Internetul mobil, când utilizați descărcarea mai multor "

metri.

"Va dura mult timp?

"Va dura mult timp? Toate aceste probleme sunt rezolvate folosind un fundal de textură. Utilizează o imagine mică ca model de textură. Chiar și sub condiția repetării sale multiple, modelul este încărcat o singură dată.

Pentru a crea un fundal întunecat pentru site-ul merge la Corp. Photoshop. Corp. , Creați o imagine sub formă de bandă de 1200 pixeli lungi și o lățime de 15 pixeli. Apoi folosim un gradient alb negru și alb și conectăm textura rezultată pe pagina site-ului:

<Stilul corpului = "Imaginea de fundal: URL (1.png); Culoare: RGB (0,51,204)"> </ corp>

Pentru claritate, am adăugat text și l-am stabilit culoarea utilizând proprietatea. Corp. Culoare Corp. . Asta sa întâmplat:

  • Înălțime: 200%; Toate proprietățile descrise mai sus sunt, de asemenea, aplicabile pentru foile de stil cascadă. Creați un fundal al site-ului
  • imagine de fundal Css.
  • Prin rescrierea codului unuia dintre exemplele noastre anterioare: <Head> <Titlu> Document Untitled </ Titlu> <Stil Type = "Text / css"> corp {fundal-imagine: URL (3.jpg); fundal-repetare: No-repetare; Poziția de fundal: centru de sus; fundal-atașare: fix;} </ stil> </ head> <corp> </ corp>
  • Rezultatul va fi similar. Ei bine, ne-am uitat la toate opțiunile, cum să schimbăm fundalul de pe site. Acum rămâne doar pentru a crea un desen al covorului viitor și a-l răspândi pe paginile resurselor dvs. Dar asta e mâna ta.
  • O zi bună pentru toată lumea să învețe și să învețe ceva nou! Ați acordat vreodată atenție aspectului site-urilor atunci când dezvoltați creatorii au fost leneși pentru a aranja fundalul paginilor? Și m-am întors. Se pare sacrificarea. Adesea, din cauza lipsei de separare obișnuite între diferite tipuri de informații, este amestecat și pur și simplu dispare dorința de a privi în continuare o astfel de resursă web. Așa că astfel de probleme s-au întâmplat cu proiectul dvs., am decis să scriu un articol pe tema: "Cum să faci un fundal de pagini în HTML". După ce ați citit publicația, veți învăța, cu ce instrumente puteți seta designul de fundal, cum să faceți un fundal fix sau schimbat și multe altele, ceea ce vă va ajuta să faceți site-ul dvs. atractiv. Acum să începem!
  • Instrumente de bază pentru setarea paginilor web de fundal Pentru a seta imaginea de fundal, dezvoltatorii de limbă web au oferit un fundal atribut. Este disponibil atât în ​​HTML, cât și în CSS.
  • În limba de marcare, acesta este un atribut al etichetei corpului și în tabelele de stil - o proprietate universală care vă permite să configurați până la 5 caracteristici ale planului din spate în același timp. Fundalul este un element destul de flexibil care poate fi folosit pentru a încerca fundalul ca o culoare, imagine color sau chiar animație. Deci, pentru a instala imaginea de fundal prin unitatea HTML <corp> Este suficient pentru a scrie un astfel de cod:
  • <Background background = "adresa de fișier"> ... </ corp> Și în loc de cuvintele "adresa fișierului" introduceți calea către imagine.
  • Cu toate acestea, observați! Dacă, în forma fundalului, doriți să vedeți o panza monochon specificată din paleta de culori, atunci acest lucru se face folosind atributul Bgcolor. De exemplu, <corp bgcolor = "# 000000"> ... </ corp>, am cerut un fundal negru pentru site-ul nostru.
  • Culorile din CSS și HTML sunt stabilite fie printr-un cuvânt englez (de exemplu roșu), fie printr-un cod special care constă dintr-un semn # și șase caractere după el (de exemplu, # FFDAB9). Când introduceți oa doua opțiune în produsele software specializate pentru dezvoltatori, paleta va apărea automat în fața dvs. Dacă tocmai ați început să învățați aceste limbi web, atunci codul de culoare poate fi amplasat pe Internet.

Fundal ca proprietate în mesele de stil cascadă Înălțime: 200%; :

Acesta este setat sau într-un fișier separat cu stiluri CSS sau în elementul <stil>. Cu această proprietate, puteți instala modele de fundal sau culoare, specificați locația de pornire a paginii, setați imagini recurente și fixe. Pentru o mai mare claritate, am făcut definiții în tabel. 

Parametri Scop

Folosit pentru a instala o imagine fixă ​​sau derulată împreună cu conținutul site-ului. Se întâmplă fix, derulați și moșteniți

Setează imaginea de fundal. Poate fi indicat simultan cu culoarea. Apoi, acesta din urmă va fi afișat până când imaginea este complet încărcată.

Setează locația inițială a obiectului pentru parametrul anterior. Orizontal indică drept, stânga și centru, iar vertical - partea de jos, de sus și centru. În plus, puteți moșteni poziția (moștenire), setată în procente, pixeli și alte dimensiuni 

Aplicați când utilizați atributul de imagine de fundal. Reglementează modul în care imaginea va fi repetată. Puteți specifica 2 valori: pentru orizontală și verticală. Există caracteristici: No-repetare, repetare, repetare-x, repetat-y, moștenire, spațiu

Добавить комментарий