html - 像Html/Css上的Windows Phone 8这样的透明磁贴

我想这样在网页上制作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。

最佳答案

我认为您要尝试的是创建一种从黑色到后面的一些背景图像的窗口。在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/

关于html - 像Html/Css上的Windows Phone 8这样的透明磁贴，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25745518/