Html 显示z索引较低的DIV的背景色

我想使DIV（div2）的一部分透明，以便显示DIV（div2）下的DIV（div1）的背景色

具有较高z指数的div1

我使用的图像是透明的，因此颜色（div背景）是可变的。目前，image1的峰值看起来不是来自image1。 我希望它看起来像这样：

我已经创建了两种类型的图像，你可以在小提琴中看到

---

你有办法解决这个问题吗？如果你有主意的话，我可以更改透明度图像。图像可能不同。

您的方法是错误的：您的图像由一个大的透明箭头形“孔”组成，用背景色填充，箭头外部的部分（三个三角形）为白色：

这就是造成你的问题的原因。例如：

.arrow{
位置：相对位置；
显示：内联块；
宽度：125px；
高度：50px；
垂直对齐：顶部；
背景图片：url(http://fs1.directupload.net/images/150226/fag7h2u7.png);
背景重复：无重复；
背景位置：左上角；
背景尺寸：125px；
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}

您的方法是错误的：您的图像由一个大的透明箭头形状的“洞”组成，用背景色填充，箭头外部的部分（三个三角形）为白色：

这就是造成你的问题的原因。例如：

.arrow{
位置：相对位置；
显示：内联块；
宽度：125px；
高度：50px；
垂直对齐：顶部；
背景图片：url(http://fs1.directupload.net/images/150226/fag7h2u7.png);
背景重复：无重复；
背景位置：左上角；
背景尺寸：125px；
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}

您在这里真的不需要图像，您可以将css 100%解决方案与css三角形结合使用：

.arrow{
宽度：100px；
高度：50px；
背景色：红色；
位置：相对位置；
浮动：左；
}
.阿罗：以前，
.阿罗：之后{
内容：“；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：25px 0 25px 50px；
位置：绝对位置；
排名：0；
}
.阿罗：以前{
左：0；
边框颜色：透明#fff；
}
.阿罗：之后{
右：-50px；
}
.左箭头{
z指数：1；
背景色：红色；
}
.左箭头：之后{
边框颜色：透明红色；
}
.向右箭头{
左边距：10px；
背景颜色：蓝色；
}
.向右箭头：之后{
边框颜色：透明蓝色；
}

---

您在这里真的不需要图像，您可以将css 100%解决方案与css三角形结合使用：

.arrow{
宽度：100px；
高度：50px；
背景色：红色；
位置：相对位置；
浮动：左；
}
.阿罗：以前，
.阿罗：之后{
内容：“；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：25px 0 25px 50px；
位置：绝对位置；
排名：0；
}
.阿罗：以前{
左：0；
边框颜色：透明#fff；
}
.阿罗：之后{
右：-50px；
}
.左箭头{
z指数：1；
背景色：红色；
}
.左箭头：之后{
边框颜色：透明红色；
}
.向右箭头{
左边距：10px；
背景颜色：蓝色；
}
.向右箭头：之后{
边框颜色：透明蓝色；
}

---

以下是一个可行的示例，具有过度效应和活动状态：

玩得开心

.breadcrumb {
    display: inline-block;
    overflow: hidden;
}
.breadcrumb a {
    text-decoration: none;
    outline: none;
    display: block;
    float: left;
    font-size: 12px;
    line-height: 36px;
    color: white;
    padding: 0 20px 0 10px;
    background: blue;
    position: relative;
}
.breadcrumb a:first-child:before {
    left: 14px;
}
.breadcrumb a:last-child {
    border-radius: 0 5px 5px 0;
}
.breadcrumb a.active, .breadcrumb a:hover span, .breadcrumb a:hover{
    background: red;
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
    background: red;
}
.breadcrumb a span{
    display: block;
    z-index: 2;
    position: relative;
    left: 20px;
    background: blue;
    padding-right: 5px;
}
.breadcrumb a.active{
    padding-left:0;
}
.breadcrumb a.active span{
    background:red;
}
.breadcrumb a:after {
    content: '';
    position: absolute;
    top: 0; 
    right: -18px;
    width: 36px; 
    height: 36px;
    transform: scale(0.707) rotate(45deg);
    z-index: 1;
    background:blue;
    box-shadow: 
        2px -2px 0 2px rgba(255, 255, 255, 1), 
        3px -3px 0 2px rgba(255, 255, 255, 0.1);
}
.breadcrumb a:last-child:after {
    content: none;
    box-shadow:none;
}

---

以下是一个可行的示例，具有过度效应和活动状态：

玩得开心

.breadcrumb {
    display: inline-block;
    overflow: hidden;
}
.breadcrumb a {
    text-decoration: none;
    outline: none;
    display: block;
    float: left;
    font-size: 12px;
    line-height: 36px;
    color: white;
    padding: 0 20px 0 10px;
    background: blue;
    position: relative;
}
.breadcrumb a:first-child:before {
    left: 14px;
}
.breadcrumb a:last-child {
    border-radius: 0 5px 5px 0;
}
.breadcrumb a.active, .breadcrumb a:hover span, .breadcrumb a:hover{
    background: red;
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
    background: red;
}
.breadcrumb a span{
    display: block;
    z-index: 2;
    position: relative;
    left: 20px;
    background: blue;
    padding-right: 5px;
}
.breadcrumb a.active{
    padding-left:0;
}
.breadcrumb a.active span{
    background:red;
}
.breadcrumb a:after {
    content: '';
    position: absolute;
    top: 0; 
    right: -18px;
    width: 36px; 
    height: 36px;
    transform: scale(0.707) rotate(45deg);
    z-index: 1;
    background:blue;
    box-shadow: 
        2px -2px 0 2px rgba(255, 255, 255, 1), 
        3px -3px 0 2px rgba(255, 255, 255, 0.1);
}
.breadcrumb a:last-child:after {
    content: none;
    box-shadow:none;
}

---

我找到了一个新的解决方案，但不容易实现。首先，你需要一个计算器，了解毕达哥尔的数学原理

其思想是在子对象上放置一个具有背景图像和相同图像的框，然后将子对象图像放置在右侧，然后旋转，困难的部分是精确地放置图像以与背景图像相对应

对于分隔符，我使用了放置在两个箭头之间的旋转正方形。 然后对于最后一个箭头，我使用了与第一个箭头相同的方法，不使用before三角形来隐藏第一部分。 所有这些都放置在带有z索引的绝对位置

但最后还是要处理图像。享受吧

.wrap{
位置：相对位置；
高度：100px；
溢出：隐藏；
}
.阿罗{
位置：绝对位置；
宽度：136px；
高度：100px；
}
.左箭头：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：50px 0 50px 50px；
边框颜色：透明#ffffff；
}
.箭头跨度{
宽度：70.71px；
高度：70.71px；
溢出：隐藏；
变换：旋转（45度）；
位置：绝对位置；
顶部：14px；
右：-35px；
}
.箭头span img{
位置：绝对位置；
顶部：11px；
右：-40px；
变换：旋转（-45度）；
}
.左箭头{
背景：url(http://lorempicsum.com/futurama/200/100/1)0 0不重复；
z指数：3；
}
.分离器{
左：95px；
背景：#fff；
宽度：90px；
高度：90px；
变换：旋转（45度）；
位置：绝对位置；
顶部：4.5px；
z指数：2；
}
.向右箭头{
背景图片：url(http://lorempicsum.com/simpsons/200/100/1);
位置：绝对位置；
排名：0；
左：150px；
z指数：1；
}

---

我找到了一个新的解决方案，但不容易实现。首先，你需要一个计算器，了解毕达哥尔的数学原理

其思想是在子对象上放置一个具有背景图像和相同图像的框，然后将子对象图像放置在右侧，然后旋转，困难的部分是精确地放置图像以与背景图像相对应

对于分隔符，i u