Další informace o opacitě CSS3

Vytváření transparentního pozadí

Jedna z věcí, které můžete snadno udělat v tisku, ale nikoliv na webu, je překryvný text na obrázku nebo na barevném pozadí a změní průhlednost tohoto obrázku tak, že text zmizí na pozadí. Existuje však vlastnost v CSS3, která vám umožní změnit opacitu vašich prvků tak, aby vybledly a vystupovaly: neprůhlednost.

Jak používat vlastnost Opacity

Vlastnost opacity má hodnotu průhlednosti od 0,0 do 1,0.

Hodnota 0.0 je 100% průhledná - cokoliv pod tímto prvkem se zobrazí úplně. 1.0 je 100% neprůhledné - nic pod elementem se nezobrazí.

Chcete-li nastavit prvek na průhlednost 50%, napište:

opacita: 0,5;

Podívejte se na některé příklady opacity v akci

Ujistěte se, že testujete ve starších prohlížečích

Ani IE 6 ani 7 nepodporují vlastnost opacity CSS3. Ale nemáš štěstí. Místo toho IE podporuje pouze alfa filtr vlastnost Microsoft. Filtry alfa v IE přijímají hodnoty od 0 (úplně průhledné) do 100 (zcela neprůhledné). Abyste získali průhlednost v IE, měli byste násobit opacitu o 100 a přidat do svého stylu alfa filtr:

filtr: alfa (opacita = 50);

Zobrazit filtr alfa v akci (pouze IE)

Použít předpony prohlížeče

Měli byste použít předpony -moz- a -webkit - tak, aby to podporovaly starší verze prohlížečů Mozilla a Webkit:

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

Představte nejprve předpony prohlížeče a platné vlastnosti CSS3.

Otestujte předpony prohlížeče ve starších prohlížečích Mozilla a Webkit.

Můžete také udělat Transparentní obrázky příliš

Nastavte opacitu na samotný snímek a bude ztlumen na pozadí. To je opravdu užitečné pro obrázky na pozadí .

A pokud přidáte kotevní značku, můžete vytvořit efekty vznášení pouze změnou opacity obrazu.

a: podržte img {
filtr: alfa (opacita = 50)
filtr: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-mozopacity: 0,5;
-webkit-opacity: 0,5;
opacita: 0,5;
}}

Ovlivňuje toto HTML:

Otestujte výše uvedené styly a HTML v akci.

Vložte text do svých obrázků

Při neprůhlednosti můžete umístit text nad obraz a snímek vypadá, že vybledne tam, kde je tento text.

Tato technika je trochu složitá, protože nemůžete jednoduše vyblednout, protože to ztratí celý obraz. A textové pole nemůžete mizet, protože text tam také zmizí.

1. Nejprve vytvoříte kontejner DIV a umístíte svůj obrázek dovnitř:

   
   

2. Sledujte obrázek prázdným DIV - to je to, co uděláte průhledné.

   
   
   

3. Poslední věc, kterou přidáte do kódu HTML, je DIV s textem v něm:

   
   
   
   To je můj pes Shasta. Není to roztomilý!

4. Formátujete ho pomocí polohování CSS a umístěte text nad obrázek. Položil jsem svůj text na levé straně, ale můžete to změnit tím, že změníte dvě levé: 0; vlastnosti vpravo: 0; .

   #obraz {
   poloha: relativní;
   šířka: 170px;
   výška: 128px;
   okraj: 0;
   }}
   #text {
   poloha: absolutní;
   horní: 0;
   vlevo: 0;
   šířka: 60px;
   výška: 118px;
   pozadí: #fff;
   polstrování: 5px;
   }}
   #text {
   filtr: alfa (opacita = 70);
   filtr: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -mozopacity: 0,70;
   opacita: 0,7;
   }}
   #words {
   poloha: absolutní;
   horní: 0;
   vlevo: 0;
   šířka: 60px;
   výška: 118px;
   pozadí: transparentní;
   polstrování: 5px;
   }}

Podívejte se, jak to vypadá