Să continuăm să luăm în considerare utilizarea pseudo-elementului înainte și în acest articol ne va permite să creăm o deplasare a imaginii de fundal dincolo de fereastră, blocul.
Puteți descărca sursa pentru articolul de mai jos
Să ne uităm la acest exemplu.
Această imagine de fundal poate fi poziționată din dreapta
deoarece foloseste un pseudo-element pentru a actiona ca un supliment
fundal panza.
Modulul de fundal CSS3
implementate în multe browsere. Tehnica pseudo-element are, de asemenea,
a adus beneficii de a putea decupa o imagine de fundal și chiar și o poziție
parțial, complet.
Fiți atenți la cutie - aceasta este imaginea cu imaginea de fundal și este situată în afara blocului!
Implementarea acestui efect este suficient de simplă.
Acum inserați blocul div, îl vom aloca ulterior stilului dorit, ceea ce va crea efectul de mai sus.
În timp ce nimic neobișnuit, doar un bloc de div și text.
Apoi, trebuie să deschideți fișierul de stil (style.css) al site-ului nostru și să setați următorul stil pentru acest bloc (div id = "position-box"):
Să analizăm codul de stil pentru acest bloc, care poate fi modificat pentru a vă potrivi gustului.
Identificatorul casetei de poziție este responsabil pentru stilul de afișare al blocului propriu-zis.
Caseta de poziționare: înainte de identificator adaugă stilul înainte de blocul "cutie de poziție".
Mai multe informații despre poziționarea casetei:
Primii doi parametri (poziția, z-index) nu sunt atinși.
padding - indiciile textului din bloc de sus, de la dreapta, de jos, de la stanga.
frontieră - frontieră în bloc.
culoare - culoarea textului din bloc (fff - alb).
fundal - culoarea fundalului blocului (4B92C0 - albastru).
lățimea este lățimea blocului.
Experimentați codul și obțineți efecte vizuale interesante.
PS: Încercați să descărcați o imagine cu un pătrat în exemplul de mai sus (cu ajutorul, de exemplu, butonul drept al mouse-ului) - nu o puteți face :) este una dintre proprietățile pseudo-elementelor.
Înregistrări similare:
Navigare după înregistrări
Trimiteți-le prietenilor: