Bun 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 imaginiAș 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 un document CSS suplimentar, fără acesta 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.
O opțiune mult mai bună dacă nu doriți să utilizați css este să utilizați texturi 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.
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 o anumită pagină pentru care se scrie codul. Dacă sunteți interesat să schimbați întreaga resursă, atunci trebuie să creați codul 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.
| Imagine de fundal |
Imagine de fundal
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ți că, dacă utilizați notepad, trebuie să utilizați . 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 de Evgeniy Popov. 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 părere despre cum să scrie, la fel și 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 de încredere, 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.
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? Nu va funcționa așa.
CSS ajută la rezolvarea acestei probleme. Trebuie să creați un fișier cu extensia css și să introduceți următorul cod:
body ( fundal: url (calea fișierului); )
Să vorbim puțin despre codul în sine. Între paranteze, după url puteți introduce un link către o imagine dintr-o 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 bineCu 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 misto. 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 să te angajezi la un antrenament serios, încearcă 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.
Buna ziua. Astăzi vom vedea cum puteți extinde fundalul folosind instrumente CSS (fără intervenția altor instrumente, cum ar fi javascript și altele asemenea).
Întinde Fundal CSS mijloacele au devenit posibile odată cu apariția CSS3, în special cu ajutorul proprietății background-size. Trebuie să spun că această proprietate funcționează mult mai bine decât soluțiile similare în Javascript (care au fost folosite înainte de apariția dimensiunii fundalului), deoarece răspunde mai rapid și mai adecvat la modificările dimensiunii browserului, netezește o imagine întinsă mai rapid și, așa cum le plăcea să spună la începutul anilor 2000, x, - „Va funcționa chiar și cu Javascript dezactivat”.
Soluție: Cum să întindeți fundalul folosind instrumente CSSProprietatea background-size poate avea mai multe valori.
1) aceasta poate fi una dintre directive: acoperă sau conține.
Mărimea fundalului: conține; /* Scadează imaginea menținând proporțiile, astfel încât întreaga imagine să se potrivească în interiorul blocului. */ background-size: coperta; /* Scadează imaginea menținând raportul de aspect, astfel încât lățimea sau înălțimea acesteia să fie egală cu lățimea sau înălțimea blocului. */
2) poate fi un procent (100% sau 94% din lățimea containerului). În acest caz, puteți utiliza fie 1 valoare procentuală, fie 2. Dacă există 2 valori, atunci atât înălțimea, cât și lățimea imaginii vor fi scalate în același timp, iar fiecare valoare este ajustată proporțional cu procentele specificate în parametrii).
Dimensiune fundal: 100%; /*Echivalent cu directiva de copertă*/ background-size: 100% 50%; /*Lățimea va fi 100% din lățimea blocului, dar înălțimea va fi de doar 50%, imaginea va fi cel mai probabil deformată*/
3) valoare direct numerică (în piskels, centimetri, em etc.). Pot exista și 2 (sau 1) parametri, ca în cazul precedent.
4) valoare auto. Indică faptul că imaginea nu va fi întinsă, dar va fi utilizată dimensiunea originală. În acest caz, pot exista și 2 sau 1 parametri, adică puteți specifica următoarele:
Dimensiune fundal: 60% automat; /*lățimea imaginii va fi de 60%, iar înălțimea va fi proporțională cu dimensiunea imaginii originale*/
Unde ar funcționa soluția de întindere a fundalului CSS?Judecând după site-ul web Can I Use, acesta va funcționa în toate browserele moderne, inclusiv în versiunile IE nu mai mici de 9. Deci, în principiu, nu există niciun motiv de îngrijorare. Vezi tabelul de compatibilitate: 
Scopul acestei lecții este de a analiza modalități de organizare a unei imagini de fundal pentru un site web, care se va întinde întotdeauna pe întreaga fereastră a browserului.
Tehnica folosind doar CSS. Partea #1.Folosind un element inline , care poate fi redimensionat în orice browser. Setăm proprietatea min-height pentru a umple fereastra browserului pe verticală și setăm proprietatea width la 100% pentru a o umple pe orizontală. De asemenea, setăm proprietatea min-width să fie egală cu lățimea imaginii, astfel încât să nu devină niciodată mai mică.
Trucul este să utilizați o interogare media pentru a verifica dacă lățimea ferestrei browserului este mai mică decât lățimea imaginii și să utilizați o combinație de o valoare procentuală pentru proprietatea din stânga și o valoare negativă pentru marginea din stânga pentru a centra fundalul imagine.
Iată codul CSS:
Img.bg ( /* Setați regulile de umplere a fundalului */ min-height: 100%; min-width: 1024px; /* Setați coeficientul de proporționalitate */ lățime: 100%; înălțime: auto; /* Setați poziționarea */ poziție: fixă: 0; stânga: 0 ) Ecranul media și (max-width: 1024px) ( /* Definit pentru fiecare imagine specifică */ img.bg ( stânga: 50%; 512px; / * 50% */ ) )
Lucreaza in:
Orice versiune a unui browser normal: Safari / Chrome / Opera / Firefox.
IE 6: Nu funcționează - dar puteți folosi unele dintre trucurile de poziționare.
IE 7/8: Funcționează de cele mai multe ori, nu centrează imaginile mici, dar umple ecranul corect.
IE 9: Funcționează.
O altă modalitate de a rezolva problema este plasarea unui element inline pe pagină, fixați-i poziția în colțul din stânga sus și setați proprietățile de lățime minimă și înălțime minimă la 100%, menținând factorul de proporționalitate.
#bg (poziție:fix; sus:0; stânga:0; /* Păstrați raportul de aspect */ min-lățime:100%; min-height:100%; )
Cu toate acestea, acest lucru nu centrează imaginea. Deci, să înfășurăm imaginea într-un element. Aceasta va fi de două ori lățimea ferestrei browserului. O imagine plasată în ea își va menține proporțiile și va acoperi complet fereastra browserului, fiind plasată exact în centru.
#bg ( poziție:fix; sus:-50%; stânga:-50%; lățime:200%; înălțime:200%; ) #bg img (poziția:absolut; sus:0; stânga:0; dreapta:0; jos: 0; lățime minimă: 50%;
Lucreaza in:
Safari / Chrome / Firefox (nu este testat pe toate versiunile, dar funcționează bine în cele mai recente).
IE 8+.
Opera (orice versiune) și IE refuză să lucreze cu această metodă (poziționarea imaginii este incorectă).
Ideea este foarte simplă, dacă raportul de aspect al imaginii (element de linie va fi folosit ca fundal) este comparat cu raportul de aspect al ferestrei browserului. Dacă este mai mic pentru imagine, atunci trebuie să alocați numai Proprietatea de lățime a imaginii este setată la 100% și va umple ecranul atât în înălțime, cât și în lățime. Și dacă mai mult, atunci atribuiți numai Proprietatea înălțimii imaginii este setată la 100%.
#bg ( poziție: fix; sus: 0; stânga: 0; ) .bgwidth ( lățime: 100%; ) .bgheight ( înălțime: 100%; )
$(function() ( var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() ( if ((theWindow) .width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
Lucreaza in:
IE7+ (cu stub-uri, probabil va funcționa în IE6)
În toate celelalte browsere.
Fiecare metodă de soluție are propriile avantaje și dezavantaje. Trebuie doar să-l alegi pe cel potrivit pentru un anumit caz. Ei bine, sau oferă-l pe al tău.
Am găsit această lecție pe unul canal youtube. O caracteristică foarte utilă pentru un web designer, în opinia mea.
Uneori, lățimea imaginii originale nu este suficientă pentru orice idee de design, iar întinderea acesteia de-a lungul lățimii distorsionează obiectele dorite. Pentru a menține aceste obiecte intacte în timp ce întindeți în continuare fundalul imaginii, PhotoShop ne pune la dispoziție anumite instrumente. Și așa, până la urmă avem din imaginea originală:
Ar trebui să arate așa:
Să începem. Deschideți imaginea noastră în PhotoShop și selectați obiectul de care avem nevoie:
Apoi, accesați fila Selecție >> Salvați zona selectată
Și setați un nume arbitrar pentru această selecție:
Astfel, am creat o zonă care va fi protejată ulterior de schimbări. Următorul pas accesați Editare >> Scală bazată pe conținut:
Și asigurați-vă că indicați obiectul protejat:
Toate. Tot ce rămâne este să modificați lățimea imaginii folosind instrumente standard (sau panoul superior prin modificarea procentului de lățime sau pur și simplu trăgând imaginea). Este important înainte de aceasta (sau chiar în stadiul inițial) să schimbați dimensiunea pânzei, astfel încât limitele imaginii să nu depășească zona de vizibilitate a acesteia.
Îmi amintesc că am scotocit prin multe informații și am încercat destul de multe metode până am găsit soluția exactă de care era nevoie în acel moment.
Mai jos voi arăta 3 metode care întind fundalul pe toată lățimea ecranului.
Metoda nr. 1Prima metodă folosește CSS3 pur. Totul funcționează datorită proprietății background-size. În cazul meu, voi întinde imaginea pe toată lățimea ecranului, adică voi atribui proprietăți etichetei body. Îl puteți aplica unui bloc după cum este necesar, de exemplu.
Vom întinde această poză cu o fată drăguță pentru a umple întregul ecran :)
În general, definim un bloc căruia îi atribuim stiluri și adăugăm următorul cod în fișierul de stil pentru acest bloc:
Body( fundal: url(images/bg.jpg) nu se repetă în centru sus fix; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: acoperi)
După cum puteți vedea, în parametrul de fundal adăugăm calea către imagine și setăm poziția imaginii față de ecran. În cazurile noastre, acestea sunt de centru și de sus. Aceasta înseamnă că imaginea va fi în centrul ecranului, iar partea superioară a acesteia va fi apăsată pe partea de sus a ecranului. Acest lucru este pentru ca fața fetei să fie întotdeauna vizibilă. Dacă, de exemplu, aveți un fundal abstract sau o natură, unde puteți vedea cerul, câmpul, orizontul, atunci puteți seta valorile centru și centru. În general, dacă sunteți familiarizat cu CSS, atunci cred că veți înțelege. De asemenea, este setat la fix , ceea ce îngheață imaginea.
Metoda este foarte simplă, o folosesc mereu și mi se potrivește 100%. Există un singur lucru. Browserele vechi nu sunt familiarizate cu CSS3, așa că cei care folosesc versiuni antice nu vor vedea rezultatul dorit.
Metoda nr. 2Această metodă folosește CSS obișnuit. În esență, este și simplu. Afișăm o imagine în corpul site-ului atribuind id - bg :
Și scriem stilurile:
#bg (poziție:fixă; indicele z: -1; sus:0; stânga:0; lățime minimă:100%; înălțime minimă:100%; )
Poziționarea este fixă și se întinde pe întregul ecran. Este la fel de simplu :).
Metoda nr. 3jQuery este folosit aici. Prin urmare, mai întâi trebuie să conectați biblioteca dacă nu a fost conectată anterior.
După bibliotecă, conectăm scriptul, care ne va scala fundalul
$(window).load(function() (var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() (dacă ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
Și la sfârșit adăugăm stiluri pentru ca totul să funcționeze. Deschideți fișierul de stil și adăugați următorul cod la el:
#bg ( poziție: fix; sus: 0; stânga: 0; index z: -1; ) .bgwidth ( lățime: 100%; ) .bgheight (înălțime: 100%; )
Puteți vedea din stilurile că am adăugat poziționare. In acest caz este fix. Imaginea va rămâne un fundal fix la derulare, dar dacă modificați poziționarea la absolut , fundalul poate fi derulat. Apropo, același lucru se poate face cu primele două metode.
Se mai specifică parametrul - z-index: -1, astfel încât imaginea să fie în spatele textului. Dacă nu aveți text care ar trebui să fie în față, puteți elimina această opțiune.
Ce metodă să folosești depinde de tine. După cum am scris mai sus, prima metodă este mai aproape de mine. Este cel mai simplu și nu mai rău decât alții.
Asta e tot, mulțumesc pentru atenție. 🙂