. În primele etape ale învățării limbilor HTML, CSS, etc apar (cum ar trebui să fie) întrebarea: cum să facă acest lucru, sau așa, și, în acest sens, cum să scrie un text peste o imagine. Este o expresie naturală de interes, și necesită consolidarea cunoștințelor în acest domeniu. Dar, pentru a realiza această sarcină, ar trebui să știi cel puțin o mică parte din CSS pentru a înțelege proprietățile de bază ale cascadă.
De fapt efectua scrierea textului peste imaginea nu este atât de dificil. Aproape făcut în detrimentul proprietății poziției și atributele sale, iar apoi există o înregistrare a textului propriu-zis. Puteți încerca să-l facă în mod diferit, de exemplu, setați fundalul div care conține în același timp, de a utiliza imaginea pe care ar trebui să fie plasat textul.
Cu toate acestea, această metodă limitează posibilitățile și chiar utilizarea de text peste imagini. Prin urmare, cea mai bună opțiune ar fi de a utiliza proprietatea poziția. Acest element oferă mari avantaje și libertate de mișcare în acest domeniu, această zonă este indicată de proprietatea poziția: relativă;. În caz contrar, poziționarea va avea loc în relație cu browser-ul.
Luați în considerare primul exemplu.
Explicație. Unitatea principală se atribuie poziția de valoare: relativă; prin aceasta ne referim zona pentru poziționarea liberă a elementelor ulterioare din această clasă.
În continuare, format în div bloc liniar element de afișare: inline-bloc;
Și ultimul lucru pe care ar trebui să acorde o atenție - această poziție: absolută;. set de elemente .
Alte stiluri sunt atât text formatat.
În al doilea exemplu folosim o inscripție mai mult pe imagine și Styling-l în mod corespunzător.
Ei bine, asta e ghinion, am folosit tag-ul
- o pauză de linie și rezultatele obținute în spațiul dintre spațiile libere. Acest lucru poate fi văzut în exemplul în care marginile de text și strâns în aparență nu este foarte frumos.
Corecta această eroare poate fi diferit. Se aplică, de exemplu, spațiu non-rupere nbsp. care va permite să crească diferența.
În a doua metodă aplicabilă etichetei ... el ca doar mai puțin de grăsime, dar noi chiar elimina.
Stilurile au adăugat o nouă proprietate alb-space: nowrap; textul de pe o singură linie. Asta e tot, cred că nu este nimic dificil.
A se vedea, de asemenea:
Efectele CSS pentru butoane
Cum de a face mai multe imagini de fundal CSS
butonul CSS. exemple manuale Scurte
Plugin-uri pentru a crea galerii de pe WordPress