Pentru a încerca totul "live", creați un tata pe desktop, puneți orice imagine în el și creați un document html simplu. Puteți face o fotografie, de exemplu.
Dimensiunile vă marchează imediat - acest lucru este important. În acest caz, acestea sunt egale cu 259 de 194 px.
Particularitatea acestei opțiuni este că unitatea nu este ajustată în înălțime și, prin urmare, pur și simplu "înfășoară" imaginea.
Și ce se întâmplă dacă vă stabiliți cu înălțime înălțimea, ceva mai mult decât imaginea? (schimbați stilul recipientului, nu atingeți imaginea)
Variantele de "mișcare" pot fi diferite, ca exemplu:
dar acesta este un subiect complet diferit. Este important ca dimensiunea imaginii să nu se schimbe!
Să presupunem acum că vrem să mărim imaginea. La fel.
E ușor.
cont img înălțime: 250px; / * Specificați înălțimea dorită a imaginii * /
>
Observi că calitatea sa agravat? Dacă vă mai potrivește - îndrăzniți, altfel căutați imaginea mai mult. În mod similar, puteți specifica cu forța lățimea ...
Imaginea "se întinde". Dacă aceasta este inscripția, sau o imagine abstractă, poate că cineva este mulțumit de ... și vă puteți întinde imaginea, și lățimea completă ... și o lățime specifică în pixeli.
Dacă nu specificați altitudinea. atunci imaginea se va schimba proporțional cu dimensiunea originală, lăsând uneori blocul.
Puteți, desigur, interzice ...
contul de depășire: ascuns; / * Ascunde partea care iese din margine * /
>
Pentru astăzi, probabil, este suficient ... Cum să pui o imagine nu prin eticheta IMG, dar pe fondul blocului, o să-i spun ... mâine.
De ce este necesar (prin fundal)? De exemplu, pentru a plasa o inscripție pe partea de sus ...
Profi, nu mă corectați, vă rog ... Știu că inscripția poate fi plasată pe această imagine ... dar subiectul este pentru începători ...
O scurtă explicație pentru întreaga lecție:
nu atingem codul HTML pe noi înșine, facem toate modificările aduse stilurilor (situate între etichetele "stil"). În cazul în care, în viitor, stilurile de pe site-ul dvs. va fi prezentat într-un fișier separat (și pe bună dreptate, în acest caz, nu am făcut acest lucru pentru a facilita înțelegerea sarcinilor) - în consecință, proprietățile imaginii și a blocului sunt scrise acolo.
Astăzi am promis să vă spun cum să plasați imagini fără a utiliza eticheta IMG. Un mod foarte comun este de a indica imaginea cu fundalul blocului. Nu vom fi deosebit de înțelepți, să luăm exemplul nostru ieri și să îl schimbăm puțin. Eliminați eticheta IMG și, în loc de ea, în stilurile de containere, scrieți imaginea de fundal: url (1.jpeg);
În acest caz (fără mișcări suplimentare din partea noastră), imaginea "zamotă" tot spațiul alocat.
Pentru a elimina "pavajul" utilizăm proprietatea de a seta repetările de fundal.
Dacă opriți repetările, imaginea va ocupa colțul din stânga sus. Pentru ao muta, există o proprietate de fundal (amintiți-vă, în cazul anterior nu a fost folosit!). Este ușor de utilizat:
De asemenea, sunt acceptabile orice valori intermediare, cu care poziția imaginii poate fi ajustată cu exactitate. Puteți obține și mai exactă dacă specificați în loc de procente, de exemplu, distanța în pixeli (din colțul din stânga sus).
Acum, să spunem că vrem să întindem imaginea, este posibil atunci când o folosim ca fundal? Bineînțeles. O nouă proprietate (din CSS3) dimensiunea de fundal ne va permite să realizăm toate ideile noastre.
Nu citesc niciun fel de capturi de ecran, deoarece rezultatul este identic cu ceea ce am primit folosind eticheta IMG.
Ce opțiune de utilizat este să te alegi, principalul lucru este că înțelegi ce și cum vrei să faci.
Dacă ceva nu este clar - puneți întrebări în subiect ... Dacă am uitat ceva sau am fugit prea superficial - specificați.
Vă mulțumesc pentru atenție.
Este tot tam-tam)). Luați programul Artesteer și trageți-vă ceva și orice. Versiunile mai noi ale programului sunt capabile să facă desene și modele pentru primele trei CMS populare. Iată imaginea atașată a capacului șablonului meu, fără utilizarea blițului (aici nu puteți introduce un bliț). Chiar și doi vor face
Aici este afișată doar cea mai simplă imagine, toate acestea sunt întunecate (glob și ca tip de rețea), aceasta este lucrarea acestui program.
Posibilitățile cu adevărat SEA în ceea ce privește designul grafic, faceți o imagine simplă și faceți totul cu el (inclusiv rotunjirea marginilor). Doar trimiteți butonul de înregistrare și butonul de link-ul, de asemenea, se introduce grafic swf în capac, introduceți imaginea în subsol, și nu necesită cunoștințe de html
Trimiteți-le prietenilor: