Minden, amit tudnia kell a CSS átlátszatlanságáról

Ez a cikk bemutatja a koncepciót, amely segít megérteni a CSS átlátszatlanságát, és megmondja, hogyan kell vezérelni ezt a paramétert.

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,



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 * /} Kimenet - Opacitás a CSS-ben - Edureka 

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 & JERRY

2. 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.