Več o motnosti CSS3

Making Your Backgrounds Transparent

Ena od stvari, ki jo lahko enostavno naredite pri oblikovanju tiskanja, ne pa na spletu, je prekrivno besedilo na sliki ali barvnem ozadju in spremenite prosojnost te slike, tako da se besedilo zbledi v ozadje. Toda v CSS3 je lastnost, ki vam bo omogočila spreminjanje nepreglednosti elementov, tako da se bodo pojavljale in odhajale: motnost.

Kako uporabljati lastnost opacity

Lastnost motnosti je vrednost količine preglednosti od 0,0 do 1,0.

0,0 je 100% pregledno - nič pod tem elementom se bo popolnoma prikazalo. 1,0 je 100% neprozorno - nič pod elementom se ne bo prikazalo.

Če želite element postaviti na 50% pregleden, bi napisali:

motnost: 0,5;

Oglejte si nekaj primerov motnosti v delovanju

Bodite prepričani, da preizkusite v starejših brskalnikih

Niti IE 6 niti 7 ne podpirajo lastnosti motnosti CSS3. Ampak nisi sreče. Namesto tega IE podpira filter z lastnostmi samo za Microsoft. Alpha filtri v IE sprejmejo vrednosti od 0 (popolnoma transparentna) do 100 (popolnoma neprozorna). Torej, če želite zagotoviti preglednost v IE, morate pomnožljivost pomnožiti za 100 in dodati filter alfa za svoje sloge:

filter: alfa (motnost = 50);

Oglejte si alfa filter v akciji (samo IE)

In uporabite predpone brskalnika

Uporabljati morate -moz- in -webkit-predpono, tako da ga podpirajo starejše različice brskalnikov Mozilla in Webkit:

-webkit-opacity: 0,5;
-moz-opacity: 0,5;
motnost: 0,5;

Najprej postavite predpone brskalnika in veljavna lastnost CSS3.

Preizkusite prefekte brskalnika v starejših brskalnikih Mozilla in Webkit.

Slike lahko pregledate preveč

Nastavite nepreglednost na sami sliki in se utopiti v ozadje. To je resnično uporabno za ozadje .

Če dodate sidrno oznako, lahko ustvarite učinke lebdenja samo s spreminjanjem nepreglednosti slike.

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

Vpliva na ta HTML:

Preizkusite zgornje sloge in HTML v akciji.

Postavite besedilo na svoje slike

Z motnostjo lahko postavite besedilo na sliko in se zdi, da se slika zbledi, kje je to besedilo.

Ta tehnika je malo zapletena, ker ne morete preprosto izginiti slike, saj bo to izginilo celotno sliko. In ne morete zblediti polja z besedilom , ker bo besedilo tudi izginilo.

1. Najprej ustvarite vsebnik DIV in postavite svojo sliko v notranjost:

   
   

2. Sledite sliki s praznim DIV-tisto, kar boste naredili pregledno.

   
   
   

3. Zadnja stvar, ki jo dodate v HTML, je DIV z besedilom v njem:

   
   
   
   To je moj pes Shasta. Ali ni srčkan!

4. Ujemate ga s pozicioniranjem CSS-a, da bi besedilo postavili nad sliko. Besedilo sem dal na levo stran, vendar ga lahko postavite na desni, tako da spremenite dve levi: 0; lastnosti na desno: 0; .

   #image {
   položaj: relativni;
   širina: 170px;
   višina: 128px;
   marža: 0;
   }
   #text {
   položaj: absolutno;
   na vrhu: 0;
   levo: 0;
   širina: 60px;
   višina: 118px;
   ozadje: #fff;
   padding: 5px;
   }
   #text {
   filter: alfa (motnost = 70);
   filter: progid: DXImageTransform.Microsoft.Alpha (motnost = 70);
   -moz-opacity: 0,70;
   motnost: 0,7;
   }
   #words {
   položaj: absolutno;
   na vrhu: 0;
   levo: 0;
   širina: 60px;
   višina: 118px;
   ozadje: transparentno;
   padding: 5px;
   }

Poglej, kako izgleda