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。

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

1 个答案:

答案 0 :(得分：0)

Answer 1

您可以像发布的图片一样安排div。 DIV由z-index堆叠，它完全在具有较低z-index的层之上（一个div覆盖将隐藏它们下面的所有元素的区域）。因此，如果元素具有z-index = 3，则它将完全高于具有较低z-index的元素。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

一个div超过另外两个，但仅在其中一个上运行

1 个答案: