Aflați despre opacitatea CSS3

Transformarea fundalului dvs. transparent

Unul dintre lucrurile pe care le puteți face cu ușurință în designul imprimării, dar nu pe Web, este textul suprapus pe o imagine sau fundal colorat și modificați transparența acelei imagini astfel încât textul să se estompeze în fundal. Dar există o proprietate în CSS3 care vă va permite să schimbați opacitatea elementelor dvs. astfel încât acestea să se estompeze și să iasă: opacitate.

Cum se utilizează proprietatea Opacity

Proprietatea de opacitate ia o valoare a valorii transparenței de la 0,0 la 1,0.

0.0 este transparent 100% - orice element sub acest element va apărea complet prin. 1.0 este 100% opac - nimic sub elementul va arăta prin.

Deci, pentru a seta un element la 50% transparent, ați scrie:

opacitate: 0,5;

Vedeți câteva exemple de opacitate în acțiune

Asigurați-vă că puteți testa în browserele mai vechi

Nici IE 6 nici 7 nu suportă proprietatea de opacitate CSS3. Dar nu ai noroc. În schimb, IE acceptă un filtru alfa proprietate numai pentru Microsoft. Filtrele Alpha din IE acceptă valori de la 0 (complet transparente) la 100 (complet opace). Deci, pentru a obține transparența în IE, trebuie să înmulțiți opacitatea cu 100 și să adăugați un filtru alfa la stilurile dvs.:

filtru: alfa (opacitate = 50);

Vedeți filtrul alfa în acțiune (numai IE)

Și Utilizați prefixele browserului

Ar trebui să utilizați prefixele -moz- și -webkit, astfel încât și versiunile mai vechi ale browserelor Mozilla și Webkit să o susțină:

-webkit-opacitate: 0,5;
-moz-opacitate: 0,5;
opacitate: 0,5;

Introduceți întotdeauna prefixele browserului și ultima proprietate CSS3 validă.

Testați prefixele browserului în browserele mai vechi din Mozilla și Webkit.

Puteți face imagini prea transparente

Setați opacitatea pe imagine în sine și se va estompa în fundal. Acest lucru este foarte util pentru imaginile de fundal .

Și dacă adăugați o etichetă de ancorare, puteți crea efecte de hover doar prin schimbarea opacității imaginii.

a: hover img {
filtru: alfa (opacitate = 50)
filtru: progid: DXImageTransform.Microsoft.Alfa (opacitate = 50)
-moz-opacitate: 0,5;
-webkit-opacitate: 0,5;
opacitate: 0,5;
}

Afectează acest cod HTML:

Testați stilurile de mai sus și codul HTML în acțiune.

Puneți textul pe imaginile dvs.

Cu opacitate, puteți plasa textul peste o imagine și imaginea pare să se estompeze acolo unde este textul.

Această tehnică este puțin complicată, pentru că nu puteți decolora imaginea, deoarece va dispărea întreaga imagine. Și nu puteți să decolorați caseta de text , deoarece textul va dispărea și acolo.

1. Mai întâi creați un container DIV și plasați imaginea în interiorul:

   
   

2. Urmați imaginea cu un DIV gol - acesta este ceea ce veți face transparent.

   
   
   

3. Ultimul lucru pe care îl adăugați în codul HTML este DIV-ul cu textul în el:

   
   
   
   Acesta este câinele meu Shasta. Nu e drăguț!

4. Formați-l cu poziționarea CSS, pentru a plasa textul deasupra imaginii. Mi-am plasat textul pe partea stângă, dar îl poți pune în dreapta schimbând cele două stânga: 0; proprietăți la dreapta: 0; .

   #imagine {
   Poziția: relativă;
   lățime: 170px;
   height: 128px;
   margin: 0;
   }
   #text {
   Poziția: absolută;
   top: 0;
   stânga: 0;
   lățime: 60 pixeli;
   height: 118px;
   fundal: #fff;
   padding: 5px;
   }
   #text {
   filtru: alfa (opacitate = 70);
   filtru: progid: DXImageTransform.Microsoft.Alpha (opacitate = 70);
   -mozo-opacitate: 0,70;
   opacitate: 0,7;
   }
   #words {
   Poziția: absolută;
   top: 0;
   stânga: 0;
   lățime: 60 pixeli;
   height: 118px;
   fundal: transparent;
   padding: 5px;
   }

Vezi cum arată