css - 一个 div 在另外两个上，但只在其中一个上运行

Question

嗨，我想做这样的事情:

对div的展望 https://drive.google.com/file/d/0B7_Dgiq7dtZEdXpZdlpMaTY2cFU/view?usp=sharing

div 设置只是为了更好地理解哪个是哪个:

  div1 - z-index: 1; background: red;
  div2 - z-index: 2; background-image: url('triangle.png');
  div3 - z-index: 3; background: rgba(255,255,255,0.65);

div3 仅操作/覆盖 div2。

任何想法如何做到这一点？

Answer 1

您可以像您发布的图片那样排列 div。DIV 按 z-index 堆叠，它完全位于 z-index 较低的层之上(一个 div 覆盖的区域将隐藏其下方的所有元素)。因此，如果元素的 z-index = 3，它将完全位于 z-index 较低的元素之上。

div{
    position: absolute;
}
div.base{
    z-index: 1;
    background: red;
    width: 300px;
    height: 300px;
    top: 10px;
    left: 10px;
}
div.triangle{
    z-index: 2;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 100px 200px;
    border-color: transparent transparent grey transparent;
    top: 100px;
    left: 50px;
}
div.top{
    z-index: 3;
top: 100px;
left: 150px;    
opacity: 0.4;
border: solid 1px black;
width: 100px;
height: 100px;
background: white;
-webkit-clip-path: polygon(0px 50px, 0px 100px, 100px 100px, 100px 0px);
}

<div class="base"></div>
<div class="triangle"></div>
<div class="top"></div>