Transparency Parent / Child Problem

[andschreiner]

Hi there,

I can’t really explain my problem, so here is a little picture:

http://andschreiner.com/container/css_example.png

The .circle has no background – but the .redBOX background is there…

Is it possible to do that like in the picture?

sry for my bad english.

[Paulie_D]

Possibly…what have you tried?

However, in general, you can’t “cut-through” backrounds of parent elements.

Will the red box have content?

[Paulie_D]

You can fake that sort of thing though.

http://codepen.io/Paulie-D/pen/zvLpJY

[andschreiner]

–

[andschreiner]

thank you for the fast answer.

my first try
http://codepen.io/andschreiner/pen/NGBYGx

• your solution with the border is pretty awesome.
• But if the redBox has content, it doesn’t work.
• Also the support of safari isn’t working.

<div class="red-box">
    <div class="child"></div>
    <div class="content">asdfasdf</div>
  </div>

.content {
     z-index:9;
}

this one isn’t working either.

[Paulie_D]

As I said, it’s not easy.

You might want to look as SVG images or masking.

[Paulie_D]

your solution with the border is pretty awesome.

It’s not a border, it’s shadow..but thanks.

But if the redBox has content, it doesn’t work.

It can…it depends on what layout you want.

http://codepen.io/Paulie-D/pen/epjMKr

Safari : It should but I can’t test.

http://caniuse.com/#feat=css-boxshadow

[Author]

Posts