Question

I have a transparent PNG that partially overlaps a button. The buttons becomes inactive where the image overlaps. Is there a way to turn the transparency “off” so the button is clickable behind it? Or are there any other tricks that might fix this problem?

Answer 1

I would say that in general, there is indeed no solution to the problem. An image area is always rectangular, no matter whether its pixels are transparent or not.

However, @Chief17’s answer gave me an idea that might work if your button is not using the OS’s rendering style, and doesn’t have a background image itself.

If that is the case, and the general layout situation permits it, you could set the image that should overlap the button as that button’s background image – in addition to the image floating around on the page. Using background-position, you would then have to adjust the image’s position so that it almost leaves the visible area of the button, covering only the small overlapping area that the button should not cover.

Is that understandably put? It’s using the button’s background-image property to fake overlapping while in truth, the overlapping area is the background image of the button.

This works only when you have really tight control over the button’s position and other factors. It may not work out for you.