Suprapunere CSS: cum se scrie text pe o imagine. Imagini în text Afișați descrierea când treceți cu mouse-ul peste imagine

Există trei imagini cu cărți de joc pe pagina web (Figura 3.51). Atâta timp cât sunt unul lângă altul, ordinea lor nu contează, dar dacă le aplicați poziționarea și mutați imaginile astfel încât să se suprapună una pe cealaltă, un card va fi mai înalt decât celălalt (Figura 3.52).

Orez. 3,51. Cărți una lângă alta

Orez. 3,52. Cărți una peste alta

Dacă vă imaginați o pagină web sub forma unui spațiu tridimensional (Fig. 3.53), puteți vedea că cardurile sunt, de asemenea, situate de-a lungul axei Z. Valorile de-a lungul acestei axe determină care card este mai aproape de noi, care este mai departe, cu alte cuvinte, ordinea în care se suprapun unul altuia . În codul documentului (Exemplu 3.38), ordinea este determinată automat pe baza fluxului documentului. Cu cât elementul din cod este mai jos, cu atât este mai sus de-a lungul axei Z, astfel încât imaginea cu As, ca cea de jos, este situată deasupra celorlalte cărți.

Orez. 3,53. Coordonatele imaginare ale unei pagini web

Exemplul 3.38. Ordinea normală a cardurilor

În CSS, poziția axei Z este controlată de proprietatea z-index, care determină dacă elementul este „mai aproape” de noi sau „mai departe”. Un număr întreg este luat ca valoare; cu cât este mai mare, cu atât elementul este mai mare în raport cu celelalte. Elementelor li se atribuie automat o valoare de 0, deci chiar și un indice z de 1 va face ca elementul să se suprapună pe toate cele subiacente. Să modificăm exemplul 3.38 astfel încât ordinea cardurilor să fie inversată și doar prin editarea stilului, lăsând codul HTML același.

Card IMG (poziție: relativ; ) .trei (sus: 50px; stânga: 55px; z-index: 5; ) .seven (stânga: -120px; sus: 25px; z-index: 2; ) .ace (stânga: -295px; z-index: 1; )

Proprietatea z-index pentru clasa a treia este setată în mod special la 5 pentru a demonstra că ordinea valorilor z-index nu contează. Principalul lucru este că un număr este mai mare decât celălalt.

Proprietatea z-index funcționează numai pentru elementele a căror valoare de poziție este absolută, fixă ​​sau relativă.

Când doriți să poziționați un element deasupra tuturor celorlalte elemente de pe pagină, acesta primește o valoare z-index foarte mare, cum ar fi 9999. Acest lucru asigură că, chiar dacă stilurile folosesc un z-index, acesta va fi mai mic decât unul specificat. În exemplul 3.39, când treceți cu mouse-ul peste hărți, indexul z se schimbă la 10. Nu sunt necesare scripturi aici, totul se face prin pseudo-clasa :hover.

Exemplul 3.39. Schimbarea indexului z atunci când treceți cu mouse-ul peste o hartă

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Etichete HTML care determină alinierea și indentarea textului

Text justificat folosit în tipografie

Exemplul de mai jos arată cum se aliniază text la lățime pagini:

align="left"	align="dreapta"
	Numărul lucrătorilor angajați în sectorul serviciilor și difuzarea informațiilor crește în fiecare zi. Dacă simbolurile secolelor trecute au fost ferma și fabrica, atunci simbolul actualului secol XXI este un birou dotat cu calculatoare care au acces la fluxul de informații.
align="justify"	align="center"
Numărul lucrătorilor angajați în sectorul serviciilor și difuzarea informațiilor crește în fiecare zi. Dacă simbolurile secolelor trecute au fost ferma și fabrica, atunci simbolul actualului secol XXI este un birou dotat cu calculatoare care au acces la fluxul de informații.	Numărul lucrătorilor angajați în sectorul serviciilor și difuzarea informațiilor crește în fiecare zi. Dacă simbolurile secolelor trecute au fost ferma și fabrica, atunci simbolul actualului secol XXI este un birou dotat cu calculatoare care au acces la fluxul de informații.

Valoarea justificativă asigură uniformitatea aliniați textul la dreapta și la stânga, acesta este în lățime. Această metodă este utilizată pe scară largă în tipărire.

Alinierea textului în HTML la centru și lățime

Aliniați textul în HTML centrat, textul la dreapta:

Rezultat:

Atribute și valori

• align="left" - definește alinierea textului la stânga(Mod implicit).
• align="center" - aliniază textul la centru.
• align="dreapta" - aliniază textul la dreapta.

Aliniați | Indentarea textului HTML

Text HTML și indentarea acestuia în partea stângă a paginii

Vom produce indentarea textuluiîn stânga în două moduri:

Rezultat:

Vizualizați în fereastră nouă.

Văd adesea în comentariile la lecții sau pe forumuri când începătorii întreabă: „Vreau să postez text peste imagine, și se dovedește a fi sub sau deasupra imaginii. Ajutor.” Să ne uităm la un exemplu specific despre cum să scrieți textul din imagine oriunde.

Trebuie să-i semnăm numele lângă fiecare legumă din ilustrația de mai jos. Sarcina pare simplă, dar credeți-mă, poate înnebuni orice webmaster începător.

Am luat în mod deliberat o imagine mare de 1280x733 ca exemplu pentru a arăta și cum să o adaptez la diferite rezoluții ale ecranului. S-au dus vremurile în care era suficient să înveți cum să aranjezi doar pentru rezoluțiile desktop. Când faceți aspectul, ar trebui să aveți grijă imediat de adaptabilitate.

Marcaj HTML

În primul rând, creăm un recipient pentru poza cu legume și pentru inscripții. Vă rugăm să rețineți că plasăm fiecare inscripție într-un bloc separat cu clase diferite. Și acest lucru este logic, deoarece toate inscripțiile vor avea propriile coordonate pe pagină și le vom gestiona scriind proprietăți în div-uri.

După terminat HTML- marcaj, vedem doar un fragment din imagine și textul care apare sub imagine. O poză cunoscută, nu-i așa?

Imaginea s-a extins la toți pixelii săi destul de mari și a apărut o bară de defilare orizontală, dar, din fericire, acest lucru este ușor de remediat prin setarea lățimii imaginii la 100%, făcând-o astfel adaptabilă. Cel puțin o problemă a fost rezolvată.

Img (
latime: 100%;
}

Acum să trecem la text.

Stiluri CSS

În stilurile de container, proprietatea cheie va fi poziție: relativă. Prin aceasta, schimbăm regulile și cerem ca coordonatele să fie numărate nu din colțul din stânga sus al ferestrei browserului, ci din colțul containerului, care este părintele tuturor elementelor imbricate în acesta și ocupă 90% din fereastră.

Container (
latime: 90%;
poziție: relativă;
text-align: centru;
culoare: #000;
familie de fonturi: arial black;
dimensiunea fontului: 250%;
}

Stânga (
poziție: absolută;
sus: 26%;
stânga: 6%;
}

Centru (
poziție: absolută;
sus: 17%;
stânga: 42%;
}

Dreapta(
poziție: absolută;
sus: 1%;
dreapta: 27%;
}

Setăm coordonatele nu în pixeli, ci în %, nu întâmplător; atunci când dimensiunea ecranului este redusă, atunci textul va rămâne în același loc în care l-am fixat. Aceasta este o veste bună, dar vestea proastă este că dimensiunea textului nu se micșorează odată cu imaginea. Poza în sine este redusă, dar textul trebuie redus cu forța.

Interogări media

La o rezoluție egală sau mai mică de 768 de pixeli, reduceți dimensiunea fontului la 150%. De unde am știut că trebuie să reducem dimensiunea la 768 de pixeli? Prin intermediul inspectorului de coduri, am văzut în ce moment sare textul pe elementele adiacente.

Unii oameni găsesc o cale de ieșire greșită: desenează text pe o imagine în editorii grafici și apoi plasează imaginea cu textul în documente html. Dar dacă textul trebuie înlocuit? Redenează imaginea din nou? Există soluții mai simple.

Ca rezultat obținem:

Totul era acoperit de zăpadă albă: atât copaci, cât și case, un vânt ușor cu aripi fluiera: „Bună, iarnă-iarnă!”

Esența metodei prezentate este că facem un container div care va conține o imagine și text. În acest caz, vom poziționa textul în raport cu colțul din stânga jos al containerului.

Cod HTML:

cod css:

.container ( display:inline-block; position:relative; ) .container div ( display: inline-block; poziție: absolut; jos: 10px; stânga: 0px; fundal-culoare: rgba(0,0,0,.4) ); umplutură: 5px 5px 5px 10px; culoare: alb)

• display: inline-block - avem nevoie ca containerul să nu se întindă pe lățimea întregii pagini.
• poziție: relativă - forțează toate blocurile imbricate cu poziție: absolută să numere coordonatele poziției lor nu din fereastra browserului, ci din blocul.container

• display: inline-block - astfel încât stilurile legate de elementele blocului să poată fi aplicate textului nostru.
• poziție: absolută - pentru a plasa un bloc folosind coordonate specifice: jos, stânga - indentări de jos și stânga (coordonate) este posibil să se folosească sus și dreapta în locul lor

Afișați descrierea când treceți cu mouse-ul peste imagine

Metoda prezentată mai sus poate fi folosită pentru a afișa text atunci când treceți cu mouse-ul peste o imagine (poate fi utilă pentru descrierea produselor dintr-un magazin online).

În fiecare zi, pe forumurile html, începătorii întreabă: „Cum se pune text deasupra unei imagini?” Unii oameni găsesc o cale de ieșire greșită: desenează text pe o imagine în editorii grafici și apoi plasează imaginea cu textul în documente html. Dar dacă textul trebuie înlocuit? Redenează imaginea din nou? Există soluții mai simple.

Folosind metodele descrise în lecție, putem obține următorul rezultat:

Pregătirea

Să facem o poză

Dimensiunea sa este de 350 px × 200 px. Și aceste informații sunt suficiente pentru a începe.
Acum să încercăm să plasăm text deasupra lui în mai multe moduri.

Metoda unu: imaginea ca fundal div

Voi spune imediat că mie însumi nu-mi place această metodă din cauza rezultatului final primitiv, dar totuși există, așa că vă voi spune despre ea.

Esența metodei este că luăm o etichetă div, îi dăm dimensiuni care se potrivesc cu dimensiunea imaginii și setăm imaginea ca fundal.
Vă rugăm să rețineți că dimensiunea etichetei = dimensiunea nativă + dimensiunea căptușelii. Astfel, dacă dorim să indentăm conținutul de la marginea imaginii cu 20px, atunci dimensiunea div-ului în sine trebuie specificată pentru a fi cu 20px mai mică. Adică: 350-20 = 330 în lățime și 200-20 = 180 în înălțime.

Exemplul 1 (
padding-top: 20px;
lățime: 330px;
padding-stânga:20px;
înălțime: 180px;
background-image:url("/examples/20120821/bg.png");

/*formatarea textului*/
culoare:#FFF;

dimensiunea fontului: 40px;
}

Rezultat:

Metoda este simplă în structura codului HTML (este necesară doar o etichetă), dar nu vă permite să setați niciun stil special textului. Ca urmare, textul poate fi dificil de citit. În plus, blocul este strict legat de dimensiunea imaginii, ceea ce înseamnă că dacă imaginea se schimbă, css-ul va trebui rescris

Metoda a doua: suprapunerea a două etichete una peste alta

Esența acestei metode este că facem un container div care va conține o imagine și text. În acest caz, vom poziționa textul în raport cu colțul din stânga sus al containerului.

Exemplul 2 (
display:inline-block;
poziție:relativă;

}
.example2 span (
display:inline-block;
poziție: absolut;
sus: 30px;
stânga: 0px;

/* Decorare text */
culoare:#FFF;
familia de fonturi:Arial, Helvetica, sans-serif;
dimensiunea fontului: 20px;

/* Fundal */
culoare de fundal:rgba(0,0,0,.4);
umplutură: 10px 30px;
}

Exemplul 2:
Avem nevoie de display:inline-block, astfel încât containerul să nu se întindă pe lățimea întregii pagini.
position:relative forțează toate blocurile imbricate cu position:absolute să numere coordonatele poziției lor nu din fereastra browserului, ci din block.example2.

Exemplu 2 interval:
display:inline-block - astfel încât stilurile legate de elementele bloc să poată fi aplicate textului nostru.
poziție:absolută - pentru a elimina o etichetă din fluxul general și pentru a o plasa în continuare folosind sarcina de coordonate specifice. sus, stânga — indentări de sus și stânga (coordonate). este posibil să folosiți în schimb jos (jos) și dreapta (dreapta).

Rezultat:

Dezavantajul acestei metode este că semantica codului este încălcată și apar multe etichete inutile. Dar nu este legat de dimensiunea imaginii, vă permite să creați un fundal pentru text, făcându-l mai lizibil și, în general, ne oferă libertate deplină în personalizarea stilurilor.

Jucând cu CSS și structura de etichete, puteți obține următorul rezultat:

Acest rezultat este destul de bun pentru proiectarea galeriilor, vitrinelor magazinelor online și a altor servicii.

Ultimul cod rezultat: