Transparent tiles like windows phone 8 on Html/Css

Question

I want to create a UI on a web page like this, but I can't understand how to do that. I tried z-index, but I couldn't create a page like this.

<style>
    .divilk {
        background-color: red;
        z-index: 1;
        width: 100%;
        height: 500px;
    }

    .divikinci {
        background-color: purple;
        width: 200px;
        height: 300px;
        margin-left: 200px;
        margin-top: 100px;
        z-index: 2;
    }

    .divtrans {
        z-index: -999;
        background-color: transparent;
        margin-top: 100px;
        margin-left: 50px;
        height: 50px;
        width: 50px;
    }
</style>
<div style="margin-top:100px;">
    <div class="divilk">
        <div class="divikinci">
            <div class="divtrans"></div>
        </div>
    </div>
</div>

And I tried divtrans's z-index:1.

Answer 1

I think what you're trying to do is create a kind of window through the black into some background image behind. That's not possible in CSS - you can't make part of an element transparent and leave the rest of it opaque.

As a possible workaround, you could set the background on each of the individual windows, and adjust the position using background-position. For example, something like:

.window {
    background-image: url('your-image.png');
    width:100px;
    height:100px;
    position:absolute;
    left:20px;
    top:20px;
    background-position:-20px -20px;
}

You can see the kind of effect this would achieve here: http://jsfiddle.net/ygmn8phw/