Html / Css上的windows phone 8等透明瓷砖

Question

我想像这样在网页上制作UI。但是我不明白我该怎么做。我尝试了z-index，我无法像这样制作页面。

<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>

我尝试了divtrans的z-index：1。

Answer 1

我认为你要做的就是通过黑色创建一种窗口，后面是一些背景图像。这在CSS中是不可能的 - 你不能使元素的一部分透明，并使其余元素不透明。

作为一种可能的解决方法，您可以在每个窗口上设置背景，并使用背景位置调整位置。例如，像：

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

你可以在这里看到这种效果：http://jsfiddle.net/ygmn8phw/