Aici aș dori să vă spun despre un efect vizual interesant, care este creat prin utilizarea a două proprietăți remarcabile ale fundal (background): transparență și fixitate.
Descărcați codul sursă pentru acest articol poate fi de mai jos
Cu acest efect, puteți crea un design original al site-ului, de exemplu, de a crea un astfel de aici:
Demo exemplu poate fi vizionat la acest link:
Dar mai întâi, trecem la teoria.
Să luăm în considerare separat fiecare dintre aceste proprietăți.
1. site-ul de fundal fix.
Tag background-attachment determină dacă sulurile de imagine de fundal, împreună cu conținutul elementului.
Imaginea poate fi fixată și să rămână în staționare sau se deplasează împreună cu documentul.
Tag background-attachment poate lua următoarele valori:
fixe - Face imaginea de fundal a unui element fix.
parcurgere - Vă permite să mutați fundalul împreună cu conținuturile (implicit).
moștenesc - moșteni valori de la un părinte.
Pentru a crea un, site-ul de fundal imobil fix, trebuie să vă înregistrați în fișierul de stiluri (style.css) următoarea linie:
Mai mult decât atât, tag-ul poate fi utilizat pentru elementele individuale ale site-ului, cum ar fi, de exemplu div (blocuri), și altele.
Această proprietate va arata mult mai impresionant dacă adăugați o imagine de fundal în loc de a folosi următoarea etichetă:
În cazul în care „... / image.jpg“ - calea către imaginea de fundal.
Ca aceasta:
De asemenea, trebuie să vă amintesc despre eticheta de fundal repeta. care specifică modul în care se va repeta imaginea de fundal.
Este posibil să se stabilească modelul de repetiție numai orizontal, vertical sau în ambele direcții.
De asemenea, a crea un fundal fix pentru site-ul interesant de urmarit valoarea acestei etichete:
fără repetare - Setați o imagine de fundal, fără repetiții.
2. fundal transparenței site-ului.
Aici avem nevoie de tag-ul opacitate.
Ea determină nivelul de transparență al elementului paginii web.
Transparență parțială sau totală prin elementul apare tapet sau alte elemente situate sub obiectul translucid.
Acesta ar trebui să specifice faptul că Internet Explorer la versiunea 9.0 pentru a schimba transparența utilizării filtrelor pentru browser-ul ar trebui să fie scris filtru: alpha (opacitatea = 50), în cazul în care parametrul de opacitate poate fi orice valoare 0 - 100.
Dar vom folosi este opacitatea tag-ul. care funcționează în toate browserele cu excepția Internet Explorer.
Această etichetă este scris după cum urmează:
Acolo unde x - pot avea valori în intervalul de 0.0 - 1.0. O valoare mai mică face ca elementul mai transparent.
exemplu:
Mai mult decât atât, tag-ul poate fi utilizat pentru elementele individuale ale site-ului, cum ar fi, de exemplu div (blocuri), și altele.
Acum vom începe să practice aici și de a crea un site printr-o combinație a proprietăților de mai sus ale fundalului.
Pentru a crea acest efect, trebuie doar să încărcați o imagine de fundal și ajustați șablonul stiluri de imagine (style.css) (tema) a site-ului.
Pentru exemplul de mai jos, voi folosi tema intitulată „Europa“. acest subiect este pe wordpress.org, astfel încât să-l instalați, sau suficient pentru a descărca în panoul de site-ul dvs., selectați „Aspect“ din meniul din stânga, apoi sub „Teme“, du-te la „Setarea înregistrării“ și în bara de căutare pentru a introduce Europa .
Chiar în lista de șabloane, selectați fișierul style.css și deschideți-l.
Și se uită la tag-ul său de cod BODY.
Acum, să se adauge imaginea de fundal și de fond Să ne dea imobilitate proprietate (fond fix):
În continuare avem nevoie pentru a adăuga pentru antet, subsol, și conținutul de bara laterală (în mod special pentru widget-urile sale) transparența proprietății.
Schimbarea de transparență a conținutului.
Pentru a face acest lucru, găsiți conținutul tag-ul și modificați-l următorul cod:
Schimbarea de transparență a subsolului (subsol).
Pentru a face acest lucru, găsiți eticheta de subsol și schimbați-l în următorul cod:
Schimbarea de transparență a barei laterale (mai eficient se va schimba transparența widget-uri bara laterală).
Pentru a face acest lucru, găsiți tag-ul și de a schimba widget-urile în el următorul cod:
Este, de asemenea, pentru a evidenția antetul widget. Puteți schimba culoarea și, de asemenea, a pus transparența.
Puteți găsi următorul cod:
Și schimba:
Schimbarea de transparență a capacului.
Pentru a face acest lucru, vom găsi antetul tag-ul:
Aici am adăugat rândurile și am obținut următoarele:
Legate de intrări:
Mesaj de navigare
În detrimentul transparenței nu interesno..bolshe plăcut „cum să se stabilească fundal“
Vă mulțumim pentru articol informativ. A fost de gând să facă în elemente translucide Photoshop sunt acum realizate cu ajutorul unor stiluri. Singura întrebare: probabil, ar trebui să optimizeze cumva o astfel de imagine de mare? Pe site-ul se încarcă rapid.
Foarte misto! Dar cum să facă acest lucru numai bloc a fost transparentă și fără conținut. Și apoi am textul din blocul și imaginea devine transparentă, prea ...
Pentru unitățile puteți încerca să facă o png sau gif semitransparent imagine de fundal.
Mă alătur Nikita. De exemplu, bara laterală am o clară, și imaginea mea de la partea de sus a barei laterale a devenit, de asemenea, clar că urât, t. Pentru a. Translucid fundal. Cum de a face fotografia nu a fost transparentă?
Mulțumesc.
Nu am absolut nimic nu sa întâmplat. Mi-ar fi plătit dacă cineva ma ajutat să scap de această problemă. Ajută-mă.
Aș dori, de asemenea, să învețe cum să facă transparente numai unitatea în sine, dar nu și conținutul său.
Vă mulțumesc foarte mult! Datorită articolul dumneavoastră, în cele din urmă sa dovedit a face transparența site-ului)
Bine ai venit! Spune-mi, te rog, cum să modificați transparența, de exemplu, un feed de știri (de exemplu, transparența fundalului pentru text), fără a schimba transparența imaginii de fundal și textul?
zemlyapermskogokraya.rf pe site-ul meu în cazul în care textul nu reușește să facă un fundal alb transparent, deși și citit articolul de departe și-n lat
Bună ziua tuturor ... Faptul că eu nu pot găsi codul pe care îl poate descrie ... tema în sine este tot închis și nu în acele locuri? nu ar fi în stare să mă ajute? dar apoi mi-am rupt capul meu)) Multumesc zpranee
Tema I «Tempera» de lucru pe WordPress ... cum și unde pot găsi codul care este responsabil pentru blocul de conținut? ((
Vă mulțumim pentru articol pe blogul său, nu toate desigur aplicabile, dar unele le-a plăcut ideea)