Question

This is more or less a scaled down version of what I got, but it’s not what I want, as I want the green div to be partially transparent, so I’ll be able to see whatever content is behind both of these divs (there is none in the example, but there is in my project). But the other div is blocking my view, so how would I ‘clip away’ part of that div?

Just a thought, there might even be a better method to solve this.

Just in case the link is broken:

HTML:

<div id="foregrounddiv2"></div>
<div id="foregrounddiv"></div>​

CSS:

#foregrounddiv2 {
  background-color:grey;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index:2;
}
#foregrounddiv {
  background-color: green;  
  position: fixed;
  z-index: 3;  
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}  

UPDATE: Sorry for the misunderstanding. The text I was talking about is situated behind both divs. Sorry about the bad naming too. I don’t want any opacity on the #foregrounddiv2 div, I just want to be able to see the content through #foregrounddiv. Hope I make sense.

Answer 1

What you want is a hole in the grey div and the hole is at the position of green div?

If so, you can not do that directly, you have to make 4 grey divs and arrange their positions to “leave” a hole on the screen.