Ďalšie informácie o opacite CSS3

Vytváranie transparentného pozadia

Jedna z vecí, ktorú môžete ľahko urobiť v tlačovom dizajne, ale nie na webe, je prekrývajúci sa text na obrázku alebo farebnom pozadí a zmeniť priehľadnosť tohto obrázka tak, aby text stratil do pozadia. Existuje však vlastnosť v systéme CSS3, ktorá vám umožní zmeniť nepriehľadnosť vašich prvkov tak, aby vybledli a vyprchali: nepriehľadnosť.

Ako používať vlastnosti nepriehľadnosti

Vlastnosť nepriehľadnosti nadobúda hodnotu priehľadnosti od 0,0 do 1,0.

0.0 je 100% transparentná - niečo pod týmto prvkom sa prejaví úplne. 1.0 je 100% neprístupné - nič, čo sa bude zobrazovať pod prvkom.

Ak chcete nastaviť prvok na 50% transparentný, napíšete:

Nepriehľadnosť: 0,5;

Pozrite si niektoré príklady opacity v akcii

Skúste sa otestovať v starších prehliadačoch

Ani IE 6 ani 7 nepodporujú vlastnosť opacity CSS3. Ale nemáš šťastie. Namiesto toho IE podporuje len alfa filter vlastníctva spoločnosti Microsoft. Alfa filtre v IE prijímajú hodnoty od 0 (úplne transparentné) do 100 (úplne nepriehľadné). Aby ste získali transparentnosť v IE, mali by ste vynásobiť vašu nepriehľadnosť 100 a pridať alfa filter do svojich štýlov:

filter: alfa (opacita = 50);

Zobraziť alfa filter v akcii (iba IE)

A použiť predpony prehliadača

Predpony typu -moz- a -webkit by ste mali používať tak, aby to podporovali aj staršie verzie prehliadačov Mozilla a Webkit:

-webkit-opacity: 0,5;
-mozopacity: 0,5;
opacita: 0,5;

Vždy vložte najskôr prefixy prehliadača a platnú vlastnosť CSS3.

Otestujte predpony prehliadača v starších prehliadačoch Mozilla a Webkit.

Môžete urobiť obrazy Transparentné

Nastavte opacitu na samotný obrázok a bude slabnúť na pozadí. To je naozaj užitočné pre obrázky na pozadí .

A ak pridáte značku kotvy, môžete vytvoriť efekty vznášania len zmenou nepriehľadnosti obrazu.

a: vznášať img {
filter: alfa (opacita = 50)
filter: progid: DXImageTransform.Microsoft.Alpha (opacita = 50)
-mozopacity: 0,5;
-webkit-opacity: 0,5;
Nepriehľadnosť: 0,5;
}

Ovplyvňuje tento HTML:

Otestujte vyššie uvedené štýly a HTML v akcii.

Vložte text do obrázkov

V prípade nepriehľadnosti môžete umiestniť text nad obrázok a obraz vyblednúť tam, kde je tento text.

Táto technika je trochu zložitejšia, pretože nemôžete jednoducho vyblednúť obrázok, pretože sa tým stratí celý obrázok. A nemôžete vyblednúť textové pole , pretože text tam bude tiež slabnúť.

1. Najprv vytvoríte kontajner DIV a umiestnite obrázok do vnútra:

   
   

2. Sledujte obrázok prázdnym DIV - to je to, čo urobíte transparentné.

   
   
   

3. Posledná vec, ktorú pridáte do kódu HTML, je DIV s textom v ňom:

   
   
   
   Toto je môj pes Shasta. Nie je to roztomilý!

4. Stlačíte ho pomocou polohovania CSS a umiestnite text nad obrázok. Položil som svoj text na ľavú stranu, ale môžete ho dať napravo zmenou dvoch ľavých: 0; Vlastnosti vpravo: 0; ,

   #image {
   Pozícia: relatívna;
   šírka: hranicu 170;
   výška: 128 px;
   margin: 0;
   }
   #text {
   pozície: absolútna;
   top: 0;
   vľavo: 0;
   šírka: 60 pixelov;
   výška: 118px;
   background: #fff;
   padding: 5px;
   }
   #text {
   filter: alfa (opacita = 70);
   filter: progid: DXImageTransform.Microsoft.Alpha (opacita = 70);
   -mozopacity: 0,70;
   Nepriehľadnosť: 0,7;
   }
   #words {
   pozície: absolútna;
   top: 0;
   vľavo: 0;
   šírka: 60 pixelov;
   výška: 118px;
   pozadie: transparentná;
   padding: 5px;
   }

Pozrite sa, ako to vyzerá