Tulajdonságok CSS3, 4. rész - RGBA, hsla és a háttér átláthatóság shublog
Ma szeretnék beszélni átlátszó háttér a szöveg blokk, hogyan kell csinálni, és hogy az általa kínált CSS3. Mielőtt elmész RGBA és hsla lásd példák használata egy áttetsző hátteret a szöveg blokk, hanem hogy hogyan lehet elérni, és milyen problémák merülnek fel. Demonstrációs fogjuk használni ezt a képet, kezelt néhány program java, valamint egy linket, amelyre sajnos már elveszett sokáig.
Megnézzük az alábbi képre. Van egy grafikai háttér, amelyen szeretnénk, hogy egy áttetsző szövegre. Ideális esetben, ott kell lennie valami a képen szám alatt 2, de előfordulhat, hogy szám alatt 3. Van egy másik hiba, de említést róla szóban ismertetjük, mert otskrinshotit nem volt lehetséges.
Félig átlátszó háttér és a nélkül RGBA hsla
- Félig átlátszó PNG. Az optimális kiviteli alak, mivel Ma ő a leginkább cross-browser és legegyszerűbb. A blokk volt átlátszó, áttetsző egyetlen pixel igényel PNG, amely úgy van beállítva, mint a háttér blokk. És mégis.
Hátrányai. Csak egy - szükség van egy hack IE6 alatt, megszünteti a problémát az áttetszőség.
opacitás: 0,5;
szűrő: alfa (opacitás = 50);
-moz-opacitás: 0,5;
ahol a 0,5 és 50 - 50% az átláthatóság. De van egy probléma. Ha meghatározzuk a tömb egy félig átlátszó, látni fogjuk, a harmadik változat a fenti kép - blokk tartalmát is lesz áttetsző. Azonban van megoldás - ingyenes elhelyezése, amelynek az a szövegrész kerül egy másik blokk, amely meghatározott és áttetszőség.
Vegyünk egy példát. Tegyük blokk narancssárga képet - ez a tag test, a tartály, amely szöveget és átlátszó hordozó - #block_bg, amelynek belsejében egy blokk egy áttetsző háttérrel #block_transparent, és a blokk szöveges - #block_text.
szerv
#block_bg helyzet: a relatív;
overflow: hidden;
szélesség: 400px;
padding: 10px;
>
#block_text
#block_transparent <
opacitás: 0,5;
szűrő: alfa (opacitás = 50);
-moz-opacitás: 0,5;
háttér: #fff;
pozíció: abszolút;
top: 0;
bal: 0;
z-index: 90;
magasság: 5000px;
szélesség: 400px;
>
Felhívom a figyelmet, hogy be kell állítani a szélességét a transzparens blokk (sor 19), különben nem fog roll 1 pixel, és a szélessége a közös blokk (5 sor), mert különben a szöveg túlmutat az átlátszó blokk (bár a szélessége lehet, és a szöveg, hogy kérje, de az alapvető különbség nem lesz). Annak érdekében, hogy visszavonulni a szöveg és a világos széle a blokk, a padding a hatodik sorban. Ahhoz, hogy az átláthatóság egy állítható magasságú, beállítva, hogy ez egy kicsit több magasság (18. sor), és az átfedés a közös blokk (4 sor).
Tehát all-in-one készülék, amely képes nyomni bármelyik része az oldal van egy érdekes hordozó. Igen, lehet, szeretnénk, hogy a háttérben egy általános mondat block_bg, de jobb, ha nem - hogy az élet nehéz magukat (attól persze a probléma). Más szóval, a jobb az egész szerkezet, hogy álljon egy külön egység, amely kijelöli a padding, és nem szenvednek.
Hátrányai. Túl nehézkes.
RGB és a HSL RGBA és hsla - CSS3 tulajdonságok
Pontosabban ez nem éppen a tulajdonságok - ez egy új lehetőséget kért színeket tulajdonságok, mint a háttér, szín, határokon, stb
A név az ingatlan ment színrendszerei RGB (vörös, zöld, kék) és a HSL (Hue, Satutation, világosság). Az első rendszer írja le színtér keverésével az alapszínek - piros, zöld és kék. A másik rendszerben az színkomponensei kijelző színét adatokat egy ismerős ember formájában: Mi ez a szín? Amennyire ő gazdag? Amennyire ő világos vagy sötét?
Kezdjük RGB és az RGBA. Az értékek R, G, B lehet beállítani 0 és 255 vagy a 0% és 100%. Az érték egy (alfa, átláthatóság) mérjük 0-1 (frakcionált megadott értékek a ponton át - 0,4, 0,7, stb). Ha R, G és B jelentése beállított értékek meghaladták a megengedett tartományon (például, 300 vagy 110% -a vagy -5), mert csökken a legközelebbi elfogadható értéket.
Tekintsük a példát az összes tulajdonságait a háttérben (bár bárki vehet a szín, vagy határ).
háttér: RGB (0, 0, 255); / * Pure kék szín * /
háttér: RGB (100%, 50%, 0%); / * Pure kék szín * /
háttér: RGB (10, 145, 500); / * Fogják ismerni, mint 10, 145, 255 * /
háttér: RGBA (10, 145, 255, 1); / * Ugyanaz, mint az előző * /
háttér: RGBA (100, 50, 255, 0,1); / * Nagyon átlátszó árnyalatú lila * /
Ja, elfelejtettem mondani, hogy nem lehet között a tulajdon és a nyitó zárójelet és a szóköz nem lehet megadni egy sorban egy értéket normál szám, mások százalékában. Ha így tesz - ez nem fog működni.
És egy pár szót hlc és hsla. Érték van megadva, valamint az RGB és az RGBA, és az első három paraméter a helyzet egy kicsit más. h van beállítva 0-tól 360, és s és l - 0% -tól 100%.
És a legfontosabb dolog. Ha rgb meghatározza a színét a feje nagyon nehéz (szinte mindig egy harmadik fél programot „pipetta”), elég, hogy egy kép a szemem előtt, hogy minden a helyére került. A képen árnyalatú paraméter h.
Ahhoz, hogy megbecsüljük a kívánt színt, válasszon egy színt, majd úgy tesz, mintha s, a színtelítettség (ahol 0% - ez egy telítetlen szín (szürke árnyalatú) és 100% - a telítettség) és a világosság (0% - ha a szín mindig fekete, ha 100% - fehér). A fentiek alapján, a kép látható világos árnyalatokkal 100% telítettség és világossági 50%.
Most minden a színteret a fej teljes méretben. Természetesen manuális kiválasztás nem helyettesíti a csepegtető, és nem minden kell egy „színtér” a fejemben, de néha, hogy gyorsan megbecsülni, hogy tesztelni kell a - elfér.
És csak egy pár példa
háttér: HSL (180, 100%, 50%); / * Telített kék szín * /
háttér: hsla (140, 50%, 30%, 0,5); / * Áttetsző, finoman, hogy a zöld árnyalat * /
Hátrányai. Mind a 4 tulajdonságai nem támogatja a régebbi böngészők és a szamár.
Általában a következő CSS3 ad nagyon hasznos dolog, de mint mindig, IE - a fő fék haladást. Ügyfél oldalakat szerettem volna, hogy tartózkodjanak a (többé semmiért teszik), és venné a lehetőséget a PNG. És a helyszínen - és miért ne. Különösen, ha ez által látogatott fejlett ember nem ül a szamár vagy töredékek az ókorban.