Kockás háttér ≠ átlátszó háttér

Mi a különbség a valódi átlátszó háttér és a csak kockás háttér között?


🎯 Miért fontos ez?
Ha weboldalon ikonokat, logókat vagy díszítő elemeket használsz, akkor szeretnéd, hogy ezek szépen illeszkedjenek a háttérhez – ne legyen körülöttük egy csúnya fehér vagy szürke téglalap.

Ehhez átlátszó hátterű képeket kell használnod – de sokan elrontják, mert összekeverik az átlátszóságot a „kockás háttérrel”.


🧠 Tisztázzuk: mi az a kockás háttér?
A legtöbb képszerkesztő, vagy akár csak a google is kockás mintával jelzi az átlátszó területeket. Ez csak a szerkesztőben iletve a googleben látszik így!
Ez nem része a képnek, csak vizuális segédlet.

➡️ Ha elmented a képet, és mégis látszik a kockás minta, akkor az nem átlátszó háttér – hanem benne maradt a kockás háttér a képben!


💡 Mi okozza a hibát?

  1. JPG formátumot használsz – ez sosem tud átlátszó hátteret.
  2. PNG vagy WebP formátumban mented, de a forráskép már eleve nem volt átlátszó, csak kockás háttérrel készült.
  3. ❌ Letöltesz egy képet a netről, ami csak úgy néz ki, mintha átlátszó lenne (kockás háttér van mögötte), de valójában az a kockás rész benne van a képben.

Mit használj, ha átlátszóság kell?

  • PNG vagy WebP formátum
  • A kép valóban legyen átlátszó – ne csak úgy tűnjön!
  • Ellenőrizd feltöltés előtt.

🚫 Kerüld el ezeket a hibákat

  • Ne tölts le képet úgy, hogy a kockás háttér már látszik a böngészőben.
  • Ne használj JPG-t ikonokhoz vagy logókhoz.
  • Ne hidd el első ránézésre, hogy egy kép átlátszó – mindig teszteld le!

🛠️ Feladat

  1. Keresd meg az utolsó 3 ikont, amit weboldalon használtál.
  2. Ellenőrizd, hogy tényleg átlátszóak-e!
  3. Ha nem, cseréld le őket átlátszóra!