Cum de a face mai multe imagini de fundal css

Astăzi ne vom ocupa de lucru pe imagini de fundal care sunt instalate folosind proprietatea de fundal și valori suplimentare. Luați în considerare o pereche de exemple practice în punerea în aplicare instalarea mai multor medii la unul și același element.

Acest lucru poate fi util în multe cazuri, și puncte. În special, utilizarea unor pseudo-elementele în această chestiune, deoarece acestea sunt foarte flexibile în parametrii.

O multitudine de imagini de fundal

Nu este de a crea o unitate în cadrul blocului, cel mai simplu mod de a adăuga o singură linie a normelor la elementul principal, și, astfel, se obține rezultatul dorit. Puteți să-l ia în considerare o serie de opțiuni concis, mai ales ca elimina nevoia de a urca din nou în codul sursă. Totul se va face numai cu ajutorul CSS.

Ar trebui să specificați parametri suplimentari prin proprietățile individuale: poziția, repetiție, dimensiunea, dacă este necesar, chiar și de culoare. De asemenea, vă rugăm să rețineți că toți parametrii sunt scrise separate prin virgulă, în aceeași ordine în care numerele sunt imaginea.

Ultimul detaliu. Toate cod poate fi redus prin utilizarea doar un singur fond de proprietate universal. Codul de probă este un al doilea exemplu de realizare, care arată cum se face.

Wallpaper de pseudo

De asemenea, nu uita despre alternativele, ca atare, sunt pseudo înainte și după. În cererea lor, în plus există o pozitiv - imaginea poate fi stocată pe marginea elementului, astfel încât acesta nu a dispărut la frontieră și a fost pe partea de sus a acesteia. Această tehnică este utilă dacă doriți să faceți ceva de genul efectul 3D.

Explicație. De fapt, totul este foarte simplu. Elementul principal în mod obișnuit ne-am stabilit fundal. Apoi, există o poziție de proprietate cheie: relativă;. care definește o zonă pentru deplasarea celălalt element situat pe elementul principal și care are o poziție caracteristică: absolută; .

În loc de un alt element, deși punct de vedere tehnic, el merge ca un domeniu separat folosind pseudo. Cerem poziția absolută și poziția la locul potrivit pentru noi.

A se vedea, de asemenea:

Efectele CSS pentru butoane

butonul CSS. exemple manuale Scurte

Stilul CSS mouse-ul. proprietatea cursorului

Transformarea CSS: mezeluri nu este un copil - efectul scuturare (CSShake)