Buna ziua tuturor! În acest articol scurt, vom discuta cum să setăm câteva imagini de fundal pe CSS3.
HTML este din nou la fel pentru noi
Și stiluri simple pentru a vedea blocul nostru, care apoi inserați imagini
lățimea blocului: 700px;
înălțime: 400px;
frontieră: 3px solid # 999;
margine: 20 pixeli;
fundal-imagine: url (img1.jpg);
background-repeat: nu-repeta;
poziția fundalului: centrul inferior;
>
În imaginea de fundal specificăm calea spre imagine, în background-repeat - pentru a repeta sau nu să repetăm imaginea, iar în poziția de fundal vom specifica poziția imaginii în bloc: prima valoare în orizontală, cea de-a doua în verticale. Valorile pot fi, de asemenea, specificate în px.
Când utilizați o imagine. puteți utiliza și culoarea. Apoi, locul unde nu există nicio imagine va fi umplut cu culoarea pe care ați ales-o.
bloc / *. * /
fundal-culoare: #ccc;
fundal-imagine: url (img1.jpg);
background-repeat: nu-repeta;
poziția fundalului: centrul inferior;
>
O altă proprietate utilă este atașamentul de fundal. care vă permite să fixați fundalul într-o singură poziție, indiferent de modul în care se mișcă blocul.
dimensiunea fundalului vă permite să modificați dimensiunea imaginii.
dimensiune de fundal: 50px 200px;
Prima valoare este orizontală. al doilea este vertical.
De asemenea, această proprietate poate avea înțeles textual: conține și acoperă. După ce ați setat prima valoare, imaginea este scalată astfel încât să fie complet cuprinsă în blocul nostru, iar la a doua valoare imaginea va umple întregul container și dacă spațiul nu este suficient, acesta va fi tăiat.
Deci, am dezmembrat toate elementele de bază ale imaginilor de fundal și acum vom vorbi despre multiple fundaluri.
În CSS3, a fost posibilă setarea mai multor fundaluri la un bloc. Pentru a face acest lucru, trebuie doar să listați a doua imagine din imaginea de fundal cu o virgulă
imagini de fundal: url (img1.png), url (img2.png);
Toate celelalte stiluri, cum ar fi repetarea fundalului etc. va fi aplicat tuturor imaginilor. Pentru a specifica propriile stiluri pentru fiecare fundal, trebuie să le listați și cu o virgulă. Apoi prima valoare se va referi la primul fundal, iar al doilea la al doilea.
background-repeat: nu-repeta, repeta;
pozitie fundal: partea stanga jos, centru dreapta;
De asemenea, acordați atenție faptului că prima imagine din imaginea de fundal va fi afișată deasupra celui de-al doilea, al doilea deasupra celui de-al treilea, etc.
În final, trebuie spus că toate aceste proprietăți pot fi combinate într-un fond de proprietate.
fundal: url (img1.png) stânga jos no-repeat, url (img2.png) dreapta centru repeta;
Recomanda acest articol prietenilor tai:
Dacă ți-a plăcut site-ul, atunci trimiți un link spre el (pe site-ul tău, pe forum, în contact):
Se pare ca aceasta:
?php include ($ _SERVER ["DOCUMENT_ROOT"]. "/ vstavki / blokvtext2.php"); ?>
Totul este minunat, dar ar fi metodologic corect să arătați exemple de pagini. Volumul lor este mic, nu vor ocupa prea mult spațiu, dar oamenii vor vedea imediat despre ce vorbesc.
Articole similare
Trimiteți-le prietenilor: