Hogyan lehet átlátszó CSS ​​hátteret készíteni

Áttetsző háttér

Részleges átláthatóság a megfelelő használatával Nagyon látványos megjelenés a helyszín kialakításában. A legfontosabb dolog az, hogy az áttetsző blokkok alatt nincs egy kézi rajz, de a kép, ebben az esetben az átláthatóság észrevehetővé válik. Az ilyen hatás különböző módon érhető el, és ha mindent emlékszel, beleértve a régimódi módszereket is, a PNG-minta háttérként való használata, a kockás kép és az opacitás tulajdonság létrehozása. De amint szükség van egy áttetsző háttér kialakítására a blokkban, ezek a módszerek kellemetlen oldal. Egy kis áttekintést fogok tenni, hogy világossá váljon, hogy a hangszórók milyenek, valamint azok az olvasók, akik nem ismerik meg a nem hagyományos lehetőségeket az áttetsző hatás létrehozására.

Png háttérként

Az egyablakos áttetsző minta előkészítve van a grafikus szerkesztőben, amelyet PNG formátumban tárolunk (rizs. 1). Ennek a formátumnak a jellemzője az átláthatósági szintek támogatása, vagy egyszerűen beszélve, tudja, hogyan kell megjeleníteni az áttetsző képeket.

Rizs. 1. Kép létrehozásához

Ezután adjunk hozzá egy képet a háttérben lévő háttérként, amint az.

1. példa. Áttetsző rajz használata

XHTML CSS IECROCROCROPSAFX

A példa eredménye rizsben jelenik meg. 3.

Rizs. 2. Alkalmazási háttér

Az elavult Internet Explorer6 böngésző nem működik áttetszővel a PNG-ben, ha bármilyen okból meg kell őrizni ezt a böngészőt, mert a parancsfájlokat kell használnia.

A csökkentett módszernek számos korlátozása van. Tehát, ha a letiltott képek a böngészőben, a háttér eltűnik egyáltalán. Ezenkívül nem könnyű megváltoztatni a háttér színét és az átláthatóság értékét, erre újra kell szerkesztenie a képet.

Kockás kép

Ez a módszer az áttetszőség megvalósításának ősi módjaira vonatkozik, amikor a böngészőket “nem tisztították”, és meg kellett keresniük a nem Sabrmed megoldásokat. A fókusz olyan kép létrehozása, amelyben átlátszó és átlátszatlan pixel alternatív (rizs. 3). Egy ilyen rendszeres struktúra áttetszőséghatást eredményez, valójában utánozza azt.

Rizs. 3. Fokozott kockás minta

Ez az, hogy a végén úgy néz ki (rizs.4).

Rizs. 4. Imation áttetsző

Ennek a módszernek a hátrányai összehasonlíthatók az előzőhöz, a Moire-minta is előfordulhat, és a szöveg romlik.

Opacity ingatlan

A CSS 3 Opacity tulajdonság az átlátszó értéket állítja be, és 0-tól 1-ig változik, ahol nulla az elem teljes átlátszósága, és az egység, az ellenkező, az opacitás. Az opacitási tulajdonságok jellemzője – az átláthatóság minden gyermekelemre vonatkozik, és nem haladhatja meg a szülő átláthatóságának értékét. Kiderül, hogy az átlátszó szöveg áttetsző háttéren nem lehet (példa).

2. példa. Az átlátszatlanság használata

XHTML CSS CSS 3Iecropsafx

Példa Az eredmények az ábrán láthatóak. 5.

Rizs. 5. Az előtér és a háttér áttetszősége

Az Internet Explorerben az opacitás nem működik a verzió előtt, így a szűrő tulajdonságot használják. Természetesen érvénytelen CSS-kódot eredményez.

Rgba

A modern megközelítés sokkal egyszerűbb és világosabb, és a fenti módszerek a szín és a háttér RGBA formátum használata. Az első három betű sokan ismeri őket, és visszafejtett, mint a piros, zöld, kék (piros, zöld, kék), az utóbbi alfa-csatornát képvisel, és beállítja az átlátszatlanság elemet. A rekord formátuma.

Háttérszín: RGBA (R, G, B, A);

A betűk helyett zárójelben helyezze el a szín értékelemét, bármely grafikus szerkesztőben megtekinthető, az utolsó érték meghatározza az átláthatóságot, és egybeesik az átlátszó tulajdonság értékével.

Nem minden böngésző támogatja az ilyen formátumot: Internet Explorer kezdődik a 9-es verzióval, az Opera 10-es verzióból, a Firefox 3, a Safari, de általában a modern böngészők helyesen mutatják az átláthatóságot. Az IE régebbi verzióihoz külön-külön meghatározhatja a színt a szokásos formátumban, ebben az esetben természetesen nem fog átláthatóság. Vagy újra, használja a szűrő funkciót, de akkor el kell fogadnia, hogy az átláthatóság is érintett és a szöveg (példa3). Az érvényes CSS-kód betartásához feltételes megjegyzéseket használtam.

3. példa. RGBA használatával

Html5csss3iecropsafx

Az eredmény példája az ábrán látható.6.

Rizs. 6. Áttetsző háttér átlátszatlan szöveggel

Hasonlítsa össze a képet az előzővel, a betűk világosabbá és világosabbá válnak.

Az Internet Explorer 7 hiba a háttérszín kombinációjával, különböző értékekkel. Ha például a háttérszínt pirosra állítja, az alábbiak szerint az IE7 háttérben nem jelenik meg.

Megoldotta, hogy a tulajdonságok háttérszínét helyettesítette a háttérben.

Van azonban egy figyelmeztetés. Validator CSS «Esküvők” a háttérben, ha az RGBA formátumban van beállítva. De ugyanakkor helyesen tartozik a háttérszínhez. Általában, mint mindig, a böngészők és az érvényesség között kell választania.

Css3rerabilityee7