如何使透明元素与其他元素重叠？

Question

我正在尝试创建一个与背景颜色相同的元素（即使背景有多种颜色），但它仍然与某些元素重叠。

#arrow_up {
   position: absolute;
   top: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-bottom: 20px solid rgba(0, 0, 0, 0.5);
   z-index: 3;
}

#arrow_up2 {
   position: absolute;
   top: 10px;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-bottom: 20px solid transparent;
   z-index: 4;
}

如您所见，有两个箭头。它们的尺寸相同，但其中一个距离顶部10px，并且是透明的。我想要做的是让＃arrow_up2与背景颜色重叠#arrow_up。最简单的解决方案是将＃arrow_up2的颜色设置为与背景颜色相同的颜色。但是，正如我所说，背景是动态的，它可能有也可能没有多种颜色。

修改

HTML：

<div class="nav">
    <div id="arrow_up"></div><div id="arrow_up2"></div>
</div>

其他CSS：

.nav {
   position: absolute;
   width: 450px;
   height: 600px;
}

图片：

图像一显示我想要的东西。这些箭头用于照片库，因此在它们下方有图像流动。如您所见，如果红色图像停在箭头下方，则会显示＃arrow_up2，这有助于形成形状。我知道我可以在photoshop中创建一个箭头，但我想知道这样的css是否可行。

我希望＃arrow_up2与背景颜色相同，并且同时重叠#arrow_up。必须有一些透明度设置，允许您继承背景颜色和重叠元素。

Answer 1

不可能用透明背景的元素逐个覆盖 - 总是可见的是他下面的元素。您可以尝试this

#arrow_up {
   position: absolute;
   top: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-bottom: 20px solid #ccc;
   z-index: 3;
}
#arrow_up2 {
   position: absolute;
   top: 10px;
   left: 18px;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #fff;
   z-index: 4;
}

（让我们自定义尺寸以制作常规形状）。

无论如何，我更喜欢使用简单的png或绘图与js canvas;）

Answer 2

你可以使用一些javascript来完成。

首先你得到背景颜色：

var bg = window.getComputedStyle(document.body).backgroundColor;

然后让你的箭头对象应该改变颜色：

var arrow = document.getElementById("arrow_up2");

只需改变它！

arrow.style.borderBottom = "20px solid " + bg;

工作示例here。