Question

我想尝试在正确的div中使元素div可见。

这是我尝试做的代码：

http://jsfiddle.net/wjewq5yq/1/

因此当<div id="block2"></div>上的白色<div id="content"></div>时，它必须被隐藏，但只要输入<div id="block1"></div>，就必须显示白色元素。

我怎么能解决这个问题？

Answer 1

如果它只是纯色，那么，您可以将蓝色透明设置为透明并通过box-shadow在其周围绘制绿色，添加一些relative和z-index来完成它：

＆＃13;

#content {
    overflow:hidden;
    background-color: blue;
    height: 300px;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#block1 {
    position:relative;
    z-index:1;
    box-shadow:0 0 0 500px green, inset 1px 1px 3px;
    height: 150px;
    width: 200px;
}
#block2 {
    background-color: white;
    height: 10px;
    width: 40px;
    position: absolute;
    top: 150px;
    -webkit-animation: moveDiv 5s linear infinite 0s;
    -ms-animation: moveDiv 5s linear infinite 0s;
    -moz-animation: moveDiv 5s linear infinite 0s;
    animation: moveDiv 5s linear infinite 0s;
}
@-webkit-keyframes moveDiv {
    0% {
        -webkit-transform: translateX(0px);
    }
    25% {
        -webkit-transform: translateX(-50px);
    }
    50% {
        -webkit-transform: translateX(-100px);
    }
    75% {
        -webkit-transform: translateX(-150px);
    }
    100% {
        -webkit-transform: translateX(-300px);
    }
}
@-ms-keyframes moveDiv {
    0% {
        -ms-transform: translateX(0px);
    }
    25% {
        -ms-transform: translateX(-50px);
    }
    50% {
        -ms-transform: translateX(-100px);
    }
    75% {
        -ms-transform: translateX(-150px);
    }
    100% {
        -ms-transform: translateX(-300px);
    }
}
@-moz-keyframes moveDiv {
    0% {
        -moz-transform: translateX(0px);
    }
    25% {
        -moz-transform: translateX(-50px);
    }
    50% {
        -moz-transform: translateX(-100px);
    }
    75% {
        -moz-transform: translateX(-150px);
    }
    100% {
        -moz-transform: translateX(-300px);
    }
}
@keyframes moveDiv {
    0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(-50px);
    }
    50% {
        transform: translateX(-100px);
    }
    75% {
        transform: translateX(-150px);
    }
    100% {
        transform: translateX(-300px);
    }
}

＆＃13;

<div id="content">
    <div id="block1"></div>
    <div id="block2"></div>
</div>

＆＃13;

如果它是关于图形背景（图像/纹理），那么白色元素不应该放在蓝色父母的蓝色和直接子项旁边，以便设置z-index属性...原谅我的平均英语：）

在图层中显示元素

1 个答案: