Link kattinthatóság ha fölé helyezünk átlátszó képet CSS

Előfordul, hogy a dizájn úgy épül fel, egy kattintható képre (pl. termék fotó) valamilyen kiemelési vagy információs célból kis kép kerül (magasabb z-index értékkel felsőbb rétegnek helyezve), pl. akciós plecsni, vagy valamilyen szélen futó szalag, stb. Ezek az átlátszó hátterű png (gif) fájlok esetében azonban a kép akkor is négyzetes, ha a megjelenő forma bármilyen más alakzatot vesz fel. Ilyenkor az eredetileg teljes mértékben kattintható képet nagy részt lefedi a dekoráció. Azonban van egy egyszerű lehetőség arra, hogy az íly módon felső rétegbe helyezett, csak képi információt tartalmazó elemet a működés szempontjából transparensé tegyük.

A felső, takaró rétegnek a css-éhez adjuk hozzá:

pointer-events:none

(Kék keret a linkelt, zöld keret a sarok szalag képe által kitakart rész)

dizájn, css