Tudjon meg többet a CSS3 opacitásáról

Háttérképek készítése átlátszó

Az egyik dolog, amit könnyen meg tudsz csinálni a nyomtatott formában, de nem az interneten, átfedő szöveg egy képen vagy színes háttéren, és változtassa meg a kép áttetszőségét, hogy a szöveg háttérbe kerüljön. De van egy tulajdonság a CSS3-ban , amely lehetővé teszi számodra, hogy megváltoztasd az elemed homályosságát úgy, hogy elhalványuljon és kiforduljon: homályosság.

Az Opacity tulajdonság használata

Az átlátszatlanság tulajdonság értéke 0,0-ről 1,0-re növeli az átlátszóság értékét.

0,0 100% -os átlátszó - bármi, ami alatta marad, teljesen megmutatja. 1,0-es, 100% -os átlátszatlan - semmi sem látható az elem alatt.

Így az elem 50% -os átláthatóvá tételéhez írjon:

opacitás: 0,5;

Lásd néhány példát az opacitás működés közben

Biztos lehet benne, hogy tesztelni fog a régebbi böngészőkben

Sem IE 6, sem 7 nem támogatja a CSS3 opacitás tulajdonságát. De nem vagy a szerencse. Ehelyett az IE támogatja a Microsoft egyetlen tulajdonságú alfa-szűrőt. Az alfa-szűrők az IE-ben elfogadják a 0-tól (teljesen átlátszó) 100-ig terjedő értékeket (teljesen átlátszatlan). Tehát, hogy az átláthatóságot az IE-ben megkapja, 100-as fokozattal többszöröznie kell az opacitását, és hozzá kell adnia egy alfa-szűrőt a stílusokhoz:

szűrő: alfa (opacitás = 50);

Lásd az alfa-szűrőt a műveletben (csak IE)

És használja a böngésző előtagokat

Használnia kell a -moz- és -webkit-előtagokat, hogy a Mozilla és a Webkit böngésző régebbi verziói is támogassák:

-webkit-opacitás: 0,5;
-moz-opacitás: 0,5;
homályosság: 0,5;

Mindig tegye a böngésző előtagokat, és tartsa az érvényes CSS3 tulajdonságot.

Tesztelje a böngésző előtagokat régebbi Mozilla és Webkit böngészőkben.

A képek áttetszőek is lehetnek

Állítsa be az opacitást a képen, és elhalványul a háttérbe. Ez nagyon hasznos a háttérképeknél .

Ha pedig egy horgonycímkét ad meg, akkor a kép áttetszőségének megváltoztatásával létrehozhat hover hatásokat .

a: ugrás img {
szűrő: alfa (opacitás = 50)
szűrő: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacitás: 0,5;
-webkit-opacitás: 0,5;
opacitás: 0,5;
}

Érinti ezt a HTML-kódot:

Tesztelje meg a fenti stílusokat és a HTML-t.

Tegye a szöveget az Ön képeihez

Az opacitással szöveget helyezhet el egy kép fölé, és megjeleníti a képet, hogy elhalványuljon a szövegen.

Ez a technika egy kicsit trükkös, mert nem egyszerűen elhalványul a kép, mert ez elhalványul az egész képen. És a szövegdobozt nem tudod elhalványulni, mert a szöveg is elhalványul.

1. Először létrehoz egy DIV tartályt, és helyezze be a képet belül:

   
   

2. Kövesse a képet egy üres DIV-vel - ez az, amit átláthatóvá teszel.

   
   
   

3. Az utolsó dolog, amit hozzáadsz a HTML-ben, a DIV a szövegedben:

   
   
   
   Ez a kutyám, Shasta. Nem aranyos!

4. CSS-pozícionálással stílusosítja a szöveget a kép felett. A bal oldali szövegemet helyeztem el, de a jobb oldali elemek megváltoztatásával helyezze el a szövegemet: 0; tulajdonságok jobbra: 0; .

   #image {
   helyzet: a relatív;
   szélesség: 170 képpontnál;
   magasság: 128px;
   margin: 0;
   }
   #text {
   pozíció: abszolút;
   top: 0;
   bal: 0;
   szélesség: 60 képpont;
   magasság: 118px;
   háttér: #fff;
   padding: 5px;
   }
   #text {
   szűrő: alfa (opacitás = 70);
   szűrő: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacitás: 0,70;
   opacitás: 0,7;
   }
   #words {
   pozíció: abszolút;
   top: 0;
   bal: 0;
   szélesség: 60 képpont;
   magasság: 118px;
   háttér: átlátszó;
   padding: 5px;
   }

Nézze meg, hogyan néz ki