Cum sa faci un fundal in html si css
Pot face înseamnă HTML pentru fundal?
Trebuie să spun că nu. În general, HTML nu este creat în scopul de a elabora o pagină web. Este doar foarte inconfortabil. De exemplu, există un atribut bgcolor, cu care puteți seta culoarea de fundal, dar este foarte incomod.
În consecință, vom folosi foi de stil în cascadă (css). Există mai multe oportunități pentru a stabili fundaluri. Azi vom analiza cel mai de bază.
Cum de a seta fundal prin css?
Deci, în primul rând aveți nevoie pentru a determina ordinea elementului pe care doriți să specificați un fundal. Asta este, trebuie să găsim selectorul, la care vom scrie regula. De exemplu, dacă trebuie să setați fundalul în întreaga pagină ca un întreg, o puteți face prin corpul selectorului, toate blocurile - prin intermediul selectorului div. Ei bine, etc. Context poate și ar trebui să fie legat de orice alte selectoare: clase stilistice, ID-uri, etc.
După ce ați decis un sistem de selectare, aveți nevoie pentru a scrie numele proprietății în sine. Pentru a seta culoarea de fundal (este o culoare solida, fara gradienti si imagini) folosind proprietatea background-color. După ce este necesar pentru a pune un colon și scrie culoarea în sine. Acest lucru se poate face în diferite moduri. De exemplu, folosind cuvinte cheie, hex-cod format RGB, RGBA, HSL. Orice metodă va face.
Metoda cea mai frecvent utilizate de cod hexazecimal. Pentru selectarea culorilor, puteți utiliza programul în care codul de culoare este vizibilă. De exemplu, Photoshop, vopsea sau orice instrument online. Prin urmare, de exemplu, prescrie un fundal general pentru toate paginile web.
Acest cod trebuie să fie introdus în capul secțiune. Este important ca fișierele sunt într-un singur dosar.
Ei bine, așa cum ne mișcăm mai departe. Pentru a vă afișa alte opțiuni stabilite fundal, am să creeze o mică unitate în care vom experimenta cu imaginea de fundal. Da, este imaginea.
Wallpaper ca fundal
Ca o imagine voi folosi o pictogramă de limbă HTML puțin:
Creați un bloc gol cu identificatorul:
Întreabă-l pentru a șterge dimensiunea și fundal:
Din acest cod, puteți vedea că am folosit o nouă caracteristică - imagine de fundal. Acesta este destinat doar pentru a insera imaginea ca un HTML element de fundal. Să vedem ce sa întâmplat:
Pentru a seta imaginea pe care trebuie să scrie un colon după URL-ul de cuvinte cheie Nu, și apoi în paranteze indică calea către fișierul. În acest caz, calea se bazează pe faptul că imaginea este în același folder ca și documentul HTML. De asemenea, trebuie să specificați formatul de imagine.
Dacă ați făcut acest lucru, iar în unitatea încă nu apare control de fond din nou dacă ați scris numele imaginii, indiferent dacă sunt specificate calea și extensia corectă în mod corect. Acestea sunt cele mai frecvente motive pentru care pur și simplu nu apare fundal, deoarece browser-ul nu poate găsi imaginea.
Dar ați observat o caracteristică? Browser-ul a luat o imagine și multiplicat pe întreg blocul. Așa că știi, este comportamentul imaginilor de fundal implicite - acestea sunt repetate pe orizontală și pe verticală, până când este timpul până când se poate târî într-un bloc. Conform acestui comportament, puteți gestiona cu ușurință. Pentru a face acest lucru, utilizați proprietatea background-repeat, care are 4 valori de bază:
Se repetă - setarea implicită, imaginea se repetă pe ambele fețe;
Repetare-x - x repetată numai OIC;
Repetare-y - repetă numai axial y;
Nu-repetare - nu se va repeta, la toate;
Fiecare valoare vă puteți înregistra și a vedea ce se întâmplă. Prescriu după cum urmează:
Acum o repetare numai pe orizontală. În cazul în care prescrie nu-repeta, ar fi doar o singură imagine.
Excelent, acest lucru este deja posibil pentru a finaliza, deoarece este abilitatea de bază de a lucra cu fundal, dar vă voi arăta încă 2 proprietăți care vă permit să obțineți mai multe oportunități de a gestiona.
Prin repetarea aspect realizat anterior, care creează gradienți textura de fundal și folosind o imagine mică. Ar putea fi de 30 x 10 pixeli sau mai puțin. Și poate un pic mai mult. Imagine a fost de așa natură încât atunci când se repetă într-una sau chiar pe ambele părți, nu a existat nici o tranziții vizibile, astfel încât o singură piesă de fond obținut. Apropo, ar trebui să fie utilizată această abordare, iar acum, dacă doriți să utilizați, textura fără sudură de pe site-ul său ca fundal. Gradientul este acum posibil să se pună în aplicare metode CSS3, despre ea încă cu siguranță vorbim.
poziţia de fundal
În mod implicit, o imagine de fundal, dacă nu setați o repetare pentru el va fi în colțul din stânga sus al blocului tau. Dar situația poate fi schimbată cu ușurință folosind fundal poziția de proprietate.
Solicitarea poate fi diferit. O opțiune este pur și simplu pentru a specifica partea în care imaginea ar trebui să fie:
Adică pe verticală, tot ceea ce a rămas: o imagine de fundal este pe partea de sus, dar am schimbat partea orizontală la dreapta, care are dreptate. Un alt mod de a seta poziția - ca procent. Numărarea începe la acest lucru în orice caz, din colțul din stânga sus. 100% - întreaga unitate. Deci, pentru a pune imaginea exact în centru, astfel încât să putem scrie:
Amintiți-vă un lucru important asociat cu poziționarea - primul parametru este specificat întotdeauna poziția orizontală, iar al doilea - pe verticală. Deci, dacă vedeți valoarea de 80% până la 20%, putem concluziona imediat că imaginea de fundal va fi mult deplasat spre dreapta, dar în jos, în același timp, puternic nu dispare.
În cele din urmă, vă puteți înregistra poziția pixelului. Tot la fel, numai că în loc de% este px. În unele cazuri, poate fi necesară poziționarea și astfel.
stenografie
Sunteți de acord că codurile sunt destul de greoaie, dacă tot întrebați așa cum am făcut-o. Se pare, și calea către imaginea pe care doriți să specificați, și repetarea, și poziția. Desigur, repetarea și poziția nu este întotdeauna necesară, dar, în orice caz, o mai corectă a folosi proprietatea stenografie. Se pare ca acest lucru:
Acesta este primul lucru de făcut este de a înregistra numărul total culoarea de fundal solid, dacă se dorește. Apoi, calea către imaginea, și repetarea poziției. În cazul în care nu este nevoie de un parametru, pur și simplu omite. Sunt de acord atât de mult mai rapid și mai convenabil, dar, de asemenea, vom reduce semnificativ codul nostru. În general, te sfătuiesc să scrie în scurt timp, chiar dacă aveți nevoie să specificați numai culoarea sau imaginea.
În continuare ne vom uita la o altă proprietate - dimensiunea fundal. Acesta nu mai este zadash abreviat ca parametri în stenografie.
Am controla dimensiunea imaginii de fundal
Imaginea noastră actuală nu este foarte bine adaptat pentru a demonstra următorul truc, așa că voi lua o alta. În dimensiune, ea lasa sa fie ca un bloc sau mai mare. Deci, imaginați-vă că vă confruntați cu provocarea: pentru a face imaginea de fundal, astfel încât să umple pachetul nu este pe deplin. O imagine, de exemplu, dimensiuni mai mari bloc.
Cum pot face în acest caz? Desigur, cel mai simplu și cel mai sensibil opțiune ar fi pur și simplu reducerea imaginii, dar nu au întotdeauna posibilitatea de a face acest lucru. Să presupunem că este pe server și în acest moment nu există nici un timp și oportunități pentru ao reduce. Problema poate fi rezolvată prin utilizarea de fond-dimensiunea proprietății, care poate fi numit relativ nou, și care permite de a manipula dimensiunea imaginii de fundal, și, în general, orice fundal.
Deci, poza mea acum ocupă întregul spațiu în bloc, dar voi întreba ea Dimensiune fundal:
Din nou, primul parametru setează dimensiunea orizontală, a doua - pe verticală. Vedem că totul a fost aplicat corect -camera dimensiune cu 80% bloc de lățime mare, și jumătate în înălțime. Apoi, trebuie doar să facă o singură precizare - setarea dimensiunii ca procent, puteți influența proporțiile imaginii. Deci, fii atent, dacă nu doriți să perturbe proporțiile.
După cum vă puteți imagina, deoarece mărimea fundal poate fi specificată în pixeli. Cu toate acestea, există două cuvinte cheie sunt valori care pot fi utilizate, de asemenea:
Coperta - va scala imaginea, astfel încât cel puțin pe o parte din ea umple complet blocul.
Conțin - va scala, astfel încât imaginea este complet ajunge în unitatea în dimensiunea sa maximă.
Beneficiile acestor valori este că acestea nu schimbă proporțiile imaginii, lăsându-le neschimbate.
De asemenea, trebuie să înțeleagă că se întinde imaginea poate duce la o deteriorare a calității sale. Pot da un exemplu din viața și practica reală a DTP. Toată lumea știe și înțelege că impunerea unui desktop trebuie să se adapteze lățimea site-ului sub monitorul principal: 1280, 1366, 1920. Dacă luați dimensiunea, spune imagine de fundal 1280 x 200, și nu cereți ei de fond dimensiuni, cu atât mai mare lățimea ecranului un loc gol, imaginea nu este umple complet lățimea.
În 99% din cazuri nu este mulțumit de dezvoltator de web, astfel încât acesta stabilește dimensiunea fundal: capac, astfel încât imaginea este întotdeauna întinsă la lățimea maximă a ferestrei. Aceasta este o tehnică bună pentru a fi folosite, dar acum se confruntă cu problema pe care utilizatorii de lățimea ecranului de 1920 de pixeli pot vedea imaginea de calitate suboptimale.
Vă reamintesc, va fi întinsă la lățimea maximă. Prin urmare, calitatea este mai rău în mod automat. Singura soluție este de a utiliza imaginea originală mai mare - 1920 de pixeli. Apoi, pe cel mai larg ecran va fi în mărime naturală, în timp ce altele pur și simplu vor fi treptat tăiate, dar în același timp, cu o selecție corespunzătoare a imaginii de fundal, aceasta nu va afecta aspectul site-ului.
În general, acesta este doar un exemplu de modul de utilizare a cunoștințelor acumulate de către dumneavoastră în acest articol, în timpul aspectul de aspectul real.
fundal semi-transparent, folosind css
O altă caracteristică care poate fi pus în aplicare folosind css - fond translucid. Aceasta este, prin acest context va fi posibil pentru a vedea ce este în spatele ei.
De exemplu, eu întreb întreaga pagină ca imagine de fundal, pe care am folosit în exemplele anterioare. Bloc cu același identificator bg, în cazul în care ne petrecem toate experimentele noastre, vom defini o culoare de fundal, folosind RGBA specifica formatul.
Prima valoare din paranteze este cantitatea de roșu, apoi verde, apoi albastru. Valoarea poate fi un număr de la 0 la 255. Prin urmare, formatul nu diferă RGBA, acumulați un singur parametru - canalul alfa. Valoarea poate fi 0 - 1, în cazul în care 0 - transparență totală.
Prin urmare, necesitatea de a scrie ceva de genul asta pentru a seta o translucenta medie:
Să setați culoarea de fundal a unui bloc, asta e ceea ce veți obține:
Cum se setează textul de fundal?
Până atunci, sunt considerate un loc de muncă de fundal pentru elemente de nivel bloc. Dar dacă trebuie să setați fundalul este textul? Soluția aici este simplu: fundalul este necesar pentru a înregistra un element de linie în care textul a fost scris. Deci, în primul rând aveți nevoie pentru a crea elementul rând. În mod implicit, aceste obiective sugerăm să utilizați interval.
Avem nevoie de ea doar pentru dvs., pentru a putea să se întoarcă la css nostru Spanu, că suntem acum bine și va face:
Totul funcționează. De fapt, în fundal, puteți seta chiar imaginea, dar eu nu înțeleg de ce acest lucru este necesar. Poate că, în unele cazuri, acesta poate fi aplicat într-un fel.
Mai multe oportunități în fundal de creare și gestionare
Așa că ne-am uitat la tine, ca în css pentru a face fundal. Dar acest lucru nu este tot ceea ce ne oferă css. Practic, toate noile oportunități au apărut datorită CSS3. De exemplu, un fond de referință plural radial gradient liniar și, noi valori pentru repetarea etc. Toate aceste caracteristici simplifică foarte mult munca unui dezvoltator web.
De exemplu, pentru a face înainte de 2 sau mai multe imagini de fundal, a trebuit să creați niște blocuri și cere fiecare dintre ele are propriul fundal. Colțul rotunjiri a fost o problemă reală, astfel încât sa ajuns la punctul în care încerc să nu folosească rotunjirii, pentru că punerea sa în aplicare a fost prea complicat.
Prin urmare, dacă aveți o dorință de a înțelege în continuare fundal, va recomand sa treci cursul nostru pentru CSS3. Apropo, în cazul în care veți învăța nu numai pentru a lucra cu fundal, dar adaugă un element de umbră, de a utiliza noi selectori, insera cadre decorative, etc. CSS3 ne-a dat o serie de noi caracteristici interesante.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
