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

我想创建一个与背景具有相同颜色的元素（即使背景有多种颜色），但它仍然会重叠一些元素。如何使一个透明元素与其他元素重叠？

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

图片：

Good arrow.

Bad arrow.

图片一显示我想要的。这些箭头在照片库中使用，因此图像在其下方流动。正如你所看到的，如果红色图像停在箭头下方，它会显示＃arrow_up2，它有助于形成形状。我知道我可以简单地在Photoshop中创建一个箭头，但我想知道这是否可以在CSS中。

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

来源

2014-09-27 ondrejba

发布一个功能正常的代码片段，人们可以鼓捣 – Luke 2014-09-27 10:35:44

我已经添加了一些HTML和CSS，并且还更改了默认的#arrow_up颜色。如果您将＃arrow_up2的颜色设置为白色，则基本可以实现我想要的效果。但是，我需要它来改变背景颜色。（你可以通过改变边框底部的颜色来改变箭头的颜色） – ondrejba 2014-09-27 10:41:36

@Webster你可以包括一个工作演示或至少一个你想要什么和你有什么的截图，因为你的问题看起来有点不清楚IMHO – pomeh 2014-09-27 10:46:50

不可能用透明背景元素来覆盖元素 - 总是可见的元素是他下面的元素。你可以试试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图纸;）

来源

2014-09-27 11:14:21 damian004

可以使用一些JavaScript做到这一点。

首先你得背景色：

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

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

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

而只是改变它！

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

工作示例here。

来源

2014-09-27 11:39:59 eiKatte

除了阅读这种样式信息的问题外 - 这对于OP所谈论的“多种背景颜色”不起作用。（OP似乎意味着在任何情况下都会显示一个图像，而不是实际的背景_color_。） – CBroe 2014-09-27 12:34:24

好吧，我误解了Webster的问题。如果这是你说的话，我认为最好只使用简单的PNG文件。我没有看到任何选择这样做。 – eiKatte 2014-09-27 13:11:57

谢谢你的回答。正如Damian004所说，这是不可能的。我宁愿使用一个简单的图像。 – ondrejba 2014-09-27 13:32:03

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

回答

相关问题