Javascript Opacity Issue

Using absolute positioning, I have placed a div with opacity of 0.5 in front of an image by giving it a higher z-index. Also using absolute positioning, I want to put another smaller div in front of the first div 开发者_高级运维using a higher z-index. This smaller div would show only part of the image (like a window), but have no opacity. Eventually, I will make the smaller image draggable.

What I am struggling with is that as long as the main div has the 0.5 opacity, the smaller one will also show the picture with the same opacity. How do I overcome this?

Sounds like you've got an answer, but you might be interested in an implementation example anyways.

Your div with 0.5 opacity cannot be one div with 0.5 opacity. It would have to be at least 4 divs with 0.5 opacity, but would probably be most flexible as 8. They would together form 8 tiles in a 3x3 grid with no center tile. They each have 0.5 opacity, and the center tile is non-existent, so it has full opacity. Then you can freely play with the dimensions of the negative space in the middle, adjusting the sizes of the various tiles to match.

If you wanted to make the center area draggable, then it would be a 9th div with 0 opacity and a drag handler.

Hope that helps. The imgAreaSelect plugin appears to use 4 tiles, where the left and right-most tiles occupy the full vertical area (i.e. each occupies 3 spaces in the 3x3 grid).

if clearing opacity doesn't help here, you'll need to place the small div outside the main div in DOM hierarchy, than place it above the main div using absolute positioning