如何使透明元素与其他元素重叠? [英] How to make an transparent element overlap other elements?

问题描述

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

I am trying to create an element which has the same color as the background (even if the background has multiple colors) but it still overlaps some elements.

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

如您所见，有两个箭头.它们的大小相同，但其中之一位于距顶部10像素的位置，并且是透明的.我想做的是让#arrow_up2与背景颜色重叠#arrow_up.最简单的解决方案是将#arrow_up2的颜色设置为与背景颜色相同的颜色.但是，正如我所说，背景是动态的，它可能有也可能只有一种颜色.

As you can see, there are two arrows. They are the same size but one of them is positioned 10px from the top and is transparent. What I want to do is to have the #arrow_up2 overlap #arrow_up with the background color. The easiest solution would be to set the #arrow_up2's color to the same color as the the background color. However, as I said, the background is dynamic and it may or may not have more than one color.

编辑

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中是否有可能像这样.

Image one shows what I want. These arrows are used in a photo gallery so there are images flowing under them. As you can see, if a red image stops under the arrow, it shows the #arrow_up2 which helps to form the shape. I know that I can simply create an arrow in photoshop but I wanted to know if it was possible in css like this.

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

I want the #arrow_up2 to have the same color as the background and overlap #arrow_up at the same time. There must be some transparency setting which lets you inherit the background color and overlap elements.

推荐答案

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

It's impossible to cover element by element with transparent background - always visible is element under him. You can try 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;
}

(让我们自定义尺寸以制作常规形状).

(let's customize sizes to make regular shapes).

无论如何，我更喜欢使用简单的png或带有js的绘图画布;)

Anyway, I prefer to use simple png or drawing with js canvas ;)

这篇关于如何使透明元素与其他元素重叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！