[Solved] Making "holes" in background

[Artem Gordinsky]

Hello guys,

I am making a slider with position indicating “bullets”. The issue is that they should look like holes in the parent’s background color or image. Does anybody have any idea how you could make something like this? The background is either RGBA or an image. Browser support doesn’t matter.

[Paulie_D]

Basically…you can’t do this with CSS as the ‘holes’ would individual elements within a ‘white’ parent’ If the child elements have no background the parent bg will show through.

Unfortunately, in general, styling a child element will not affect the styling of the parent. CSS just doesn’t work that way.

A PNG bg image (or images)would be the best option but the implementation will depend on your exact requirements.

[paulob]

Hi,

It can be done (sort of) but not in any usable way apart from a CSS trick.

http://www.codepen.io/paulobrien/full/eLjID

The holes are made by using a fixed positioned background which just overlays the original image on top of the gradient and creates the illusion of a hole.

A fixed positioned image only appears if the element is over the space where the image is placed (from the viewport) so you don’t have to specify individual positions for the holes because they will just show the relevant part automatically.

However it all goes to pot when the page scrolls so is of no use other than an example. :)

You will have to do what Paulie_D suggests above and overlay an image of the background in the correct spot or use a png image with holes already cut out.

[paulob]

If holes can be drawn within a surface that is not too big, you may use box-shadow : http://codepen.io/gc-nomade/pen/GHqtd

Nice :) (clever technique but a little fiddly)

[Artem Gordinsky]

Hey guys,
After all, I ended up going with PNG, as it is the easiest way.
Thank you all for your help and interesting solutions, I really appreciate it!

[Author]

Posts