Image overlay circle in a circle

First, let me tell you what I want to achieve. I need a layout like below (Replace squares with circles):

|------------|
| |-------|  |
| | button|  |
| |-------|  |
|------------|

      

It's a button inside a circle image. The button should also be round. How should I do it? As in, is there a way to overlay one circle image on top of another?

+2


source to share


3 answers


Just use CSS to absolutely position the elements, the tag img

in the background and the button above it. Set the z-index of the overlay (button) above the background element.



0


source


Yes, this is possible by adding a top circle with a transparent edge to the div that has a larger circle as a background image (also transparent if needed). To make a circular button you will need to use an imagemap .



0


source


You can do this using PNG or GIF formats, or any other format that supports transparency and works in browsers that you need to support.

However, it is easier to use a single image with an image map.

0


source







All Articles