html - Html/Css 上的透明磁贴，如 Windows Phone 8

Question

我想在网页上制作这样的用户界面。但我不明白我应该怎么做。我尝试了 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 中是不可能的 - 您不能使元素的一部分透明而其余部分不透明。

作为一种可能的解决方法，您可以在每个单独的窗口上设置背景，并使用 background-position 调整位置。例如，像这样的东西:

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