Ez a cikk megismerteti Önt azzal a koncepcióval, amely segít megérteni az átlátszatlanságot és megmondja, hogyan kell vezérelni ezt a paramétert. A következő hivatkozásokkal foglalkozunk ebben a cikkben,
- Opacitás a CSS-ben
- Lépcsőzetes elemekkel örökölt átlátszatlanság
- RGBA A lépcsőzetes elemek attribútum-beállítása
- Az átlátszatlanság megváltozik a lebegő hatáson
Az elem háttér átlátszatlansága hasznos szolgáltatásbeállítás a HTML-tervezésben. Az átlátszatlanság szintjének (az átlátszóság inverze) beállításával a tervező a CSS átlátszatlansági tulajdonságán keresztül szabályozhatja az elem láthatóságát. Ezt általában háttérbeállításként használják, ha egymás fölé helyezett elemek lépcsőzetesek.
A funkció leggyakoribb forgatókönyve a következő:
- Részben átlátszó háttérkép kerül egy szövegelem mögé.
- A háttérkép homályosan látható, ezért nem uralja az előtte álló szöveget.
- A kép teljes fókuszba kerülhet, ha a felhasználó kifejezetten úgy dönt, hogy látja.
Érdemes felolvasni a mielőtt a CSS átlátszatlanságával foglalkozna.
Átfogó CSS oktatóanyagért látogasson el Edureka CSS bemutató kezdőknek . Kiváló heads-upot kap arról, hogy a CSS-t hogyan kell használni a HTML webtervezés bővítéséhez.
Továbblépve ezzel a cikkel a CSS opacitásáról
Opacitás a CSS-ben
A CSS-ben az Opacity értéket 0,0 - 1,0 közötti számértékként állítják be. A nullához közelebb eső értékek nagyobb átlátszóságot képviselnek, a kép nagyon világos lesz. Kezdjük azzal a példával, hogy a kép 50% -os átlátszósággal jelenik meg. Lásd az alábbi 1. példát.
ssis bemutató lépésről lépésre
1. példa: Háttérkép félig beállítva átláthatóság
img {átlátszatlanság: 0,5 szűrő: alfa (átlátszatlanság = 50) / * IE8 és korábbi verzióknál * /} 
1. példa: Kimenet
Eredeti kép (100% opacitású)
Kép 50% opacitás beállítással
A fenti példában csak egy elem volt - egy kép. Más elemek is beállíthatók az opacitás paraméterrel, például szöveg, div elemek stb.
Továbblépve ezzel a cikkel a CSS opacitásáról
Lépcsőzetes elemekkel örökölt átlátszatlanság
Ha az elemek egymásra vannak rakva, ha a háttérelemnek opacitási beállítása van, akkor az összes gyermekelem örökli. Ez a alapértelmezett beállítás . Ez azt jelenti, hogy ha egy szövegmező kerül egy kép fölé, és a kép átlátszatlansága 0,5, akkor a kép és a szövegelem is csak részben látható.
Vegyük a következő példánkban a TOM & JERRY kép fölé helyezett gyermekszöveg példányát. Az alapértelmezett átlátszatlansági hatást a 2. példában láthatjuk.
.container {position: relatív text-align: center opacitása: 0.5} .centered {position: abszolút felső: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } TOM & JERRY2. példa: A szöveg örökli az átlátszatlanságot a szülőképből
Továbblépve ezzel a cikkel a CSS opacitásáról
RGBA A lépcsőzetes elemek attribútum-beállítása
Van egy másik módja annak, hogy az átlátszatlanság lépcsőzetes elemekkel szabályozható. Ha azt szeretné, hogy a gyermek elemet ne befolyásolja a háttérelem átlátszatlansága, akkor használhatja RGBA attribútum beállítása .
3. példa: Az RGBA beállítás használata
háttér: rgba (76, 175, 80, 1.0) / * A kép nem rendelkezik átlátszatlansággal * / / * Zöld háttér a 100% -os opacitású szöveghez * / / * A kék színű szöveg 100% -os opacitású * /
háttér: rgba (76, 175, 80, 0,4) / * A kép nem rendelkezik átlátszatlansággal * / / * Zöld háttér a 40% -os opacitású szöveghez * / / * A kék szöveg továbbra is látható 100% -os opacitással * /
Az RGB színkód után az ’a’ attribútum áll alfa . Az alfa A paraméter értéke 0,0 (teljesen átlátszó) és 1,0 (teljesen átlátszatlan).
Továbblépve ezzel a cikkel a CSS opacitásáról
Az átlátszatlanság megváltozik a lebegő hatáson
Bizonyos esetekben a webtervezők azt akarják, hogy az átlátszatlanság attól függően változzon, hogy a felhasználó az elemre koncentrál-e vagy sem. Tegyük fel például, hogy egy kép alapértelmezés szerint 50% -os átlátszatlanságra van állítva. Amikor azonban a felhasználó az egeret a kép fölé viszi, akkor azt akarjuk, hogy a kép teljes fókuszba kerüljön, 100% -os átlátszatlansággal.
A 4. példa bemutatja, hogyan történik ez.
Megjegyzendő közös pontok:
- Az átlátszatlanság beállítása egy alternatívája a „láthatóság” attribútumnak a CSS-ben. Az átlátszatlansági beállítás használata azonban megkönnyíti a különféle fokú átlátszóság beállítását, nullától a teljesig.
- Az átlátszatlanság szintjét különféle böngészőkben végzett alapos tesztelés után kell beállítani. Ha az átlátszatlanság alacsony értékre van állítva, néha a szöveg vagy a kép teljesen láthatatlanná vagy olvashatatlanná válhat.
- Az átlátszatlanság ötlete az, hogy élesen összpontosítson egyes elemeket, míg más háttérelemek nem vonják el a felhasználó figyelmét. Tehát az ilyen háttérelemek alacsonyabb átlátszatlansággal vannak beállítva.
- Az Internet Explorer alkalmazásban az IE8 és régebbi verziók esetében az opacitás tulajdonság egy „szűrő” beállítás, amely 1 és 100 között mozog. Az összes többi böngészőben 0 és 1 között mozog.
Ezzel eljutottunk az Opacity In CSS című cikkünk végéhez.
Ha többet szeretne megtudni a webfejlesztésről, nézze meg a írta Edureka. A webfejlesztési tanúsítási képzés segít megtanulni, hogyan hozhat létre lenyűgöző weboldalakat HTML5, CSS3, Twitter Bootstrap 3, jQuery és Google API-k segítségével, és telepítheti az Amazon Simple Storage Service (S3) szolgáltatásba.
Ha továbbra is érdekel Ha bármilyen kérdése van, feltöltheti ennek az „Opacity In CSS” blog megjegyzés rovatának, és mi a lehető leghamarabb kapcsolatba lépünk Önnel.