Jó napot, webfejlesztő geek, valamint újoncok. Azok számára, akik nem követik az informatika, vagy inkább a webdivat trendjeit, szeretném ünnepélyesen bejelenteni, hogy ez a kiadvány a „Hogyan készítsünk eszközökkel átlátszó css blokkot” témában az Ön számára megfelelő. A jelenlegi 2016-ban ugyanis stílusos lépésnek számít a különféle átlátszó objektumok online szolgáltatásokba való bevezetése.
Ezért ebben a cikkben elmondom az átláthatóság megteremtésének összes létező módszerét, az özönvíz előtti megoldásoktól kezdve, a megoldások böngészőkkel való kompatibilitására összpontosítva, és konkrét példákat adok a programkódra. És most dolgozni!
1. módszer. Vízözön előtti
Amikor még gyenge számítógépek voltak, és nem fejlesztették ki a „képességeket”, a fejlesztők saját módszert találtak az átlátszó háttér létrehozására: átlátszó pixeleket használtak felváltva színesekkel. Az így elkészített blokk skálázva sakktáblának tűnt, normál méretben viszont valamiféle átlátszóságra emlékeztetett.
Ez a "mankó" véleményem szerint természetesen segít a böngészők régebbi verzióiban, amelyekben a modern megoldások nem működnek. De érdemes megjegyezni, hogy a szöveges megjelenítés minősége , beírva az ilyen , élesen esik.
2. módszer. Nem zavart
Ritka esetekben a fejlesztők a problémát egy áttetsző kép bevezetésével oldják meg úgy, hogy beillesztenek ... egy már kész áttetsző képet! Ehhez a PNG-24 formátumban mentett képeket használjuk. Ez a grafikus formátum 256 áttetszőségi szint beállítását teszi lehetővé.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Ez a módszer azonban több okból nem kényelmes:
- Az Internet Explorer 6 nem működik ezzel a technológiával, szkript kódot kell írni hozzá;
- A css-ben nem módosíthatja a háttérszínt;
- Ha a képmegjelenítés funkciót letiltjuk a böngészőben, az eltűnik.
3. módszer: Előléptetés
A blokk átlátszóvá tételének legelterjedtebb és legismertebb módja a tulajdonság átlátszatlanság.
A paraméter értéke a tartományban változik, ahol 0-nál az objektum láthatatlan, 1-nél pedig teljesen megjelenik. Itt azonban vannak kellemetlen pillanatok.
Először is, minden gyermekelem átlátszóságot örököl. Ez pedig azt jelenti, hogy a beírt szöveg is „átragyog” a háttérrel együtt.
Másodszor, az Internet Explorer újra felhúzza az orrát, és a 8-as verzióig nem működik vele átlátszatlanság.
A probléma megoldásához használja szűrő:alfa (Opacitás=érték).
Vegyünk egy példát.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Módszer 4. Modern
Ma a szakemberek az rgba (r, g, b, a) eszközt használják.
Előtte elmondtam, hogy az RGB az egyik népszerű színmodell, ahol az R felelős a piros minden árnyalatáért, a G - a zöld és a B - a kék árnyalatokért.
A css paraméter esetén az A változó felelős az alfa csatornáért, ami viszont az átlátszóságért.
Ez utóbbi módszer fő előnye, hogy az alfa csatorna nem befolyásolja a stílusos blokkon belüli objektumokat.
Az rgba (r, g, b, a) támogatott, mivel:
- Az Opera 10 verziója;
- Internet Explorer 9;
- Safari 3.2;
- A Firefox 3 verziója.
Egy érdekes tényt szeretnék megjegyezni! A kedvelt Internet Explorer 7 hibát ad egy tulajdonság kombinálásakor háttérszín a színek nevével (háttérszín: arany). Ezért csak a következőket szabad használni:
háttérszín: rgba(255, 215, 0, 0,15)
És most egy példa.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Üzletünkben mindenféle virágot megtalál.
|
Vegye figyelembe, hogy a blokk szövegtartalma teljesen látható (100% fekete), míg a háttér 0,88-as alfa csatornára van állítva, azaz. 88%.
Ez a bejegyzés a végéhez érkezett. Iratkozz fel a blogomra, és ne felejtsd el meghívni barátaidat sem. Sok sikert a webes nyelvek tanulásához! Viszlát!
Leírás
Meghatározza egy elem háttérszínét. Bár ez a tulajdonság nem örökli a tulajdonságokat a szülőtől, mivel a kezdeti érték átlátszóra van állítva, a gyermekelemek háttérszíne megegyezik a szülőelem háttérszínével.
Szintaxis
háttérszín:<цвет>| átlátszó | örököl
Értékek
átlátszó Átlátszó hátteret állít be. inherit A szülő értékét örökli.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ez a példa három különböző módot használ a weblapelemek háttérszínének beállítására. A példa eredménye az ábrán látható. egy.
Rizs. 1. Alkalmazza a háttérszínt
Objektummodell
document.getElementById("elementID ").style.backgroundColor
Böngészők
Az Internet Explorer 7.0-s verzióig nem támogatja az öröklési értéket.
Nincs közvetlen mód a háttérkép átlátszóságának beállítására (legalább 2016-ra) CSS-en keresztül (beleértve a CSS 3-at is). Számos megoldás létezik erre a problémára.
Hátterek keverése
A legegyszerűbb megoldás a két háttér (egy kép és egy áttetsző szín) összekeverése. Ez a módszer akkor megfelelő, ha az „átlátszó háttérkép” alatt azonos típusú háttér található. ez egyáltalán nem átlátszóság, hanem annak utánzása a kép színnel való keverésével. Állítson be dupla hátteret, amely egy háttérképből és a kívánt színből áll egy alfa csatornával. Ezt követően válassza ki a legmegfelelőbb keverési módot, és a szín alfa csatornájával állítsa be a kívánt eredményre a kompozíciót.
Háttér: url("/images/img1.jpg"), rgba(255,255,255,0.9); background-blend-mode: color;
Pszeudoelem hozzáadása
A legjobb módja annak, hogy megszerezze, amit akar. Létrehozunk egy pszeudoelemet az after pszeudoosztály segítségével. Elérhető
#main ( pozíció: relatív; ) #main:after ( tartalom: ""; kijelző: blokk; pozíció: abszolút; felül: 0; bal: 0; háttérkép: url(/wp-content/uploads/2010/11 /tandem.jpg); szélesség: 100%; magasság: 100%; átlátszatlanság: 0,2; z-index: -1; )
Helló. Amint azt bizonyára tudja, a háttér egy CSS-tulajdonság, amely lehetővé teszi a háttérszín beállítását vagy a háttérként való kép feltöltését. A CSS3 bevezette a lineáris és radiális színátmenetek létrehozásának lehetőségét is, de ez egy külön cikk témája. Ugyanebben szerettem volna elmondani, hogyan lehet beállítani az átlátszóságot a háttértulajdonsághoz css-ben.
Állítsa be az átlátszóságot a css háttérhez
Tehát mindez nagyon egyszerűen megtörténik egy olyan színes felvételi formátumnak köszönhetően, mint az rgba . Ha grafikus szerkesztőkkel dolgozik, valószínűleg tudja, hogy az rgb színmód dekódolása a következőképpen történik: a piros (piros), a zöld (zöld) és a kék (kék) aránya. Tehát az rgba szinte ugyanaz, csak még egy paramétert adunk hozzá - az átláthatóságot. Így van írva:
Háttérszín: rgba(173, 57, 22, 0,5)
Először is kifejezetten jelezzük, hogy a színt rgba módban állítjuk be. Ezután a három alapszín telítettségi értékét adjuk meg 0-tól 255-ig, ahol a 255 a legmagasabb telítettség. A negyedik paraméter az átláthatóságunk. Itt az érték 0-tól egyig van írva. Az 1 egy teljesen átlátszatlan elem, a 0 pedig egy teljesen átlátszó elem. Ennek megfelelően, ha 0-ra állítja, akkor a háttérszín egyáltalán nem lesz látható.
Most már tudja, hogyan állíthatja be a háttértulajdonság átláthatóságát a css-ben. Ehhez az rgba színmódot kell használnia. Van egy átlátszatlansági tulajdonság is, de ez a teljes elem egészére vonatkozik. Vagyis az átlátszatlanság alkalmazásakor az átlátszóság is alkalmazható a szövegre, ami olvashatatlanná teszi azt.
Átlátszó háttér példa
Az áttetsző háttér előnyeit egy példán könnyű bemutatni. Például van egy általános oldal hátterünk. Így nézne ki a blokk, ha egyszínű fekete színt kapna:
És most állítsuk be ugyanazt a fekete színt a blokkhoz, de adjuk meg az rgba színformátumot használva, az utolsó értéket például 0,7-ben adjuk meg. Így fog kiderülni:
Most a blokk háttere áttetsző, és rajta keresztül látható a háttérkép. Ez a kép és a háttér csak illusztráció. Amint Ön is tudja, a css-ben az átlátszóság akkor jöhet jól, ha egy beágyazott elem hátterét át kell látni anélkül, hogy elfedné a többi rétegben található hátteret.
Magát a színt nem nehéz beállítani az rgba segítségével. Mint már említettük, az első három betű a három alapszínt jelenti: piros, zöld és kék, vagy inkább ezek arányát (0-tól 255-ig). Különböző értékek megadásával milliónyi különböző színt kaphat, az áttetszőség pedig lehetővé teszi, hogy szükség esetén sok szép effektussal rukkoljunk elő az oldalra.
A CSS az opacitás tulajdonságot használja átlátszó hatás létrehozásához.
Az IE8 és a korábbi verziók támogatnak egy alternatív tulajdonságot - filter:alpha(opacity=x) , ahol az "x" értéke 0 és 100 között lehet, minél kisebb az érték, annál átláthatóbb lesz az elem.
Az összes többi böngésző támogatja a szabványos CSS opacitás tulajdonságot, amely 0,0 és 1,0 közötti értéket vehet fel, minél kisebb az érték, annál átláthatóbb lesz az elem:
Próbálja meg "Mutasson átlátszóságot
A :hover pszeudoosztály lehetővé teszi az elemek megjelenésének megváltoztatását, ha rájuk viszi az egeret. Ezt a funkciót fogjuk használni, hogy a kép elveszítse átlátszóságát, amikor lebeg:
Próbálja meg "Háttér átlátszóság
Az elemek átlátszóvá tételének két lehetséges módja van: a fent leírt átlátszatlanság tulajdonság és egy RGBA háttérszín megadása.
Lehet, hogy már ismeri az RGB színmegjelenítési modellt. RGB (Red, Green, Blue - piros, zöld, kék) - színrendszer, amely a vörös, zöld és kék keverésével határozza meg az árnyalatot. Ha például a szöveg színét sárgára szeretné állítani, a következő deklarációk bármelyikét használhatja:
Szín: rgb(255,255,0); szín: rgb(100%,100%,0);
Az RGB-ben megadott színek annyiban térnek el az általunk korábban használt hexadecimális értékektől, hogy lehetővé teszik az alfa-csatorna használatát az átlátszóság érdekében. Ez azt jelenti, hogy az alatta lévő egy alfa-átlátszó elem hátterén keresztül fog megjelenni.
Az RGBA színdeklaráció szintaxisában hasonló a szabványos RGB-szabályokhoz. Többek között azonban az értéket RGBA-ként kell deklarálnunk (RGB helyett), és a színérték után egy további decimális átlátszósági értéket kell beállítanunk 0,0 (teljesen átlátszó) és 1 (teljesen átlátszatlan) között.
Szín: rgba(255,255,0,0,5); szín: rgba(100%,100%,0,0,5);
Az átlátszatlanság tulajdonság és az RGBA között az a különbség, hogy az átlátszatlanság tulajdonság a teljes elemre átlátszóságot alkalmaz, azaz az elem teljes tartalma átlátszóvá válik. Az RGBA pedig lehetővé teszi az átlátszóság beállítását az elem egyes részeihez (például csak szöveg vagy háttér):
Törzs ( háttérkép: url(img.jpg); ) .prim1 (szélesség: 400px; margó: 30px 50px; háttérszín: #ffffff; szegély: 1px tömör fekete; betűsúly: félkövér; átlátszatlanság: 0,5; szűrő : alfa(átlátszatlanság=70); /*IE8 és korábbi verziókhoz*/ szöveg igazítása: középre; ) .prim2 (szélesség: 400px; margó: 30px 50px; háttérszín: rgba(255,255,255,0,5); szegély: 1px tömör fekete; betűsúly: félkövér; szövegigazítás: középre; ) Próbáld ki »
Megjegyzés: Az RGBA értékeket az IE8 és korábbi verziók nem támogatják. A tartalék szín deklarálásához régebbi böngészőkhöz, amelyek nem támogatják az alfa-csatornák színértékeit, először az RGBA érték előtt adja meg: background: rgb(255,255,0); háttér: rgba(255,255,0,0,5);
