Poziționarea exactă a imaginii pe o pagină web

ordinele Acceptam suspendate temporar. Ne cerem scuze pentru eventualele neplăceri.

MLA Studio ArtWebMaster este dezvoltarea și crearea de site-uri din Rostov-pe-Don.

Suntem, de asemenea, implicate în crearea de componente, module si plugin-uri pentru Joomla CMS.

Site-ul dvs. este static? Ne putem muta la CMS Joomla și veți obține un site web rapid dinamic.

Nu există suficient timp pentru a face față cu site-ul? Ne angajăm de lucru pentru a sprijini și de site-uri de întreținere.

În unele cazuri, webmasteri pentru a crea site-uri sau pagini web de aspect și de template-uri se confruntă cu o situație în care trebuie să plasați imaginea exact în locul potrivit paginii pentru ao alinia cu fundalul imaginii. De exemplu, atragem designul paginii de start și în această figură este un astfel de fragment:

Fragment design pagina de design.

Trebuie să „taie“ imaginea în imagini separate, și face o copie exactă pe site-ul creat pagina. Cu atenție privit mai aproape de fragmentul de design, putem vedea că:

Fundalul constă într-o frază care se repetă, astfel încât să poată fi tăiate separat și să facă tag-ul de fundal div sau un td.
Logo-ul are o polupozrachnuyu spate fading lin umbra, deci nu poate fi tăiat exact pe margine, și este necesar pentru a capta o parte din fundal.

Ca rezultat, vom obține două imagini:

Poza 2.
Logo-ul cu o parte din fundal.

Acum trebuie să le-a pus pe o pagină a site-ului și de a combina cu precizie de pixeli. Există mai multe modalități de a face acest lucru:

Faceți o masă și se taie în celulă, încercați să combinați marginea imaginii 2 cu fundalul;
Folosind un singur pixel gif transparent fișier 2 poate muta imaginea în jos și la dreapta;
În loc de fișier GIF transparent, se poate utiliza un câmp format cu tag-ul div;
Și așa mai departe.

Puteți veni cu destul de o mulțime de opțiuni pentru punerea în aplicare a unui astfel de problemă, dar vreau să vă ofere cel mai mult, în opinia noastră, un mod simplu și eficient pentru a poziționa cu precizie imaginea în interiorul unei etichete. Acesta constă în prescrierea în stilul tag-ul img în care am stabilit imaginea de offset de mai sus și spre stânga. Codul HTML imagine va arata astfel:

Imaginea de fundal Să presupunem, de exemplu, tag-ul div. deși este posibil și tr - este așa cum vă place. Rezultatul este:

Iată cum va arăta:

Combinate imagine de fundal și logo-ul.

Toate bine și bine - imaginea devine exact acolo unde ar trebui să fie și ceea ce este necesar.

Folosind această metodă, pentru poziționarea exactă a imaginilor trebuie doar pentru a modifica valoarea din stânga-padding (imagini indentare stânga) padding-top (top imagini marja).

Acum, câteva note importante:

Trebuie înțeles faptul că eticheta în interiorul căruia este plasată imaginea trebuie fie predeterminate fixedly înălțimea și lățimea (folosind lățimea și înălțimea), sau imaginea trebuie să fie „lipite“ pe partea de sus și din stânga tag (td tag-ul se face cu prin valign și align). În mod ideal, ar trebui să faci ambele.
Dacă acest lucru nu se face, imaginea poate „deplasa în jos“ de la locul său, în funcție de etichetele din jur, incadrand text și imagini. Este posibil să fi văzut astfel de site-uri, în care tranziția de la o pagină la alta, programul începe să „dispersa“.
În exemplul descris mai sus, stiluri plasate în interiorul tag-uri. Nu este necesar și se face numai pentru claritate. În principiu, acestea pot face un fișier separat foaie de stil CSS.

Iată toată înțelepciunea. După cum puteți vedea, nimic complicat în acest fel acolo, dar îndeplinește sarcina de bine.

Vă doresc mult noroc și succes în programarea web!