Uzziniet par CSS3 neskaidrību

Jūsu fonu pārredzamība

Viena no lietām, ko varat viegli izdrukāt, bet ne tīmeklī, ir pārklājuma teksts uz attēla vai krāsainā fona un mainīt šī attēla caurspīdīgumu, lai teksts tiktu izgaismots fonā. Bet CSS3 īpašumā ir īpašums, kas ļaus mainīt elementu necaurredzamību, lai tās izzustu un izkustu: necaurredzamība.

Kā izmantot opacity īpašumu

Caurspīdīguma īpašums iegūst pārredzamības vērtību no 0,0 līdz 1,0.

0.0 ir 100% pārredzams - kaut kas zem šī elementa tiks parādīts pilnībā. 1.0 ir 100% necaurredzams, nekas netiks rādīts zem elementa.

Tātad, lai elementu iestatītu uz 50% pārredzamu, jūs rakstītu:

necaurredzamība: 0,5;

Skatiet dažus neskaidrības darbības piemērus

Noteikti izmēģiniet vecākos pārlūkos

Ne IE 6, ne 7 neatbalsta CSS3 neskaidrības īpašumu. Bet tev nav neveiksmes. Tā vietā IE atbalsta tikai Microsoft tikai īpašuma alfa filtru. Alfa filtri IE atzīst vērtības no 0 (pilnīgi caurspīdīga) līdz 100 (pilnīgi necaurspīdīgi). Tātad, lai iegūtu pārskatāmību IE, jums vajadzētu palielināt savu necaurredzamību par 100 un pievienot savu stilu alfa filtru:

filtrs: alfa (necaurredzamība = 50);

Redziet alfa filtru darbībā (tikai IE).

Un izmantojiet pārlūkprogrammas prefiksus

Jums vajadzētu izmantot -moz- un -webkit-prefiksus, lai tā arī atbalstītu vecākas Mozilla un Webkit pārlūkprogrammu versijas:

-webkit-opacity: 0,5;
-moz-necaurredzamība: 0,5;
necaurredzamība: 0,5;

Vienmēr vispirms ielieciet pārlūkprogrammas prefiksus, un derīgais CSS3 īpašums ir pēdējais.

Pārbaudiet pārlūka prefiksus vecākos Mozilla un Webkit pārlūkos.

Jūs varat padarīt attēlus caurspīdīgs pārāk

Iestatiet pārredzamību uz paša attēla un tas izbalinās fonā. Tas tiešām ir noderīgs fona attēliem .

Un, ja pievienojat enkura tagu, jūs varat izveidot uzlikšanas efektus , mainot attēla necaurredzamību.

a: hover img {
filtrs: alfa (necaurredzamība = 50)
filtrs: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-necaurredzamība: 0,5;
-webkit-opacity: 0,5;
necaurredzamība: 0,5;
}

Ietekmē šo HTML:

Pārbaudiet iepriekš minētos stilus un HTML darbībā.

Ievietojiet tekstu savos attēlos

Ar necaurredzamību varat ievietot tekstu virs attēla, un šķiet, ka attēls izzūd, kur tas ir.

Šī metode ir nedaudz sarežģīta, jo jūs nevarat vienkārši izgaismot attēlu, jo tas izzudīs visu attēlu. Un jūs nevarat izbalināt teksta lodziņu , jo teksts tajā arī izgaist.

1. Vispirms izveidojat konteineru DIV un ievietojiet savu attēlu iekšā:

   
   

2. Izpildiet attēlu ar tukšu DIV - tas ir tas, ko jūs padarīsiet caurspīdīgu.

   
   
   

3. Pēdējā lieta, kuru pievienojat savam HTML, ir DIV ar jūsu tekstu tajā:

   
   
   
   Tas ir mans suns Shasta. Vai viņš nav gudrs!

4. Jūs to veidojat ar CSS pozicionēšanu, lai ievietotu tekstu virs attēla. Es ievietoju savu tekstu kreisajā pusē, bet jūs varat to ievietot pa labi, mainot abus pa kreisi: 0; īpašības pa labi: 0; .

   #image {
   pozīcija: radinieks;
   platums: 170 pikseļi;
   augstums: 128 pikseļi;
   starpība: 0;
   }
   #text {
   amats: absolūti;
   top: 0;
   pa kreisi: 0;
   platums: 60 pikseļi;
   augstums: 118 pikseļi;
   fons: #fff;
   polsterējums: 5 pikseļi;
   }
   #text {
   filtrs: alfa (necaurredzamība = 70);
   filtrs: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-necaurredzamība: 0,70;
   necaurredzamība: 0,7;
   }
   #words {
   amats: absolūti;
   top: 0;
   pa kreisi: 0;
   platums: 60 pikseļi;
   augstums: 118 pikseļi;
   fons: caurspīdīgs;
   polsterējums: 5 pikseļi;
   }

Uzziniet, kā tas izskatās