如何使一個透明元素與其他元素重疊？

我想創建一個與背景具有相同顏色的元素（即使背景有多種顏色），但它仍然會重疊一些元素。如何使一個透明元素與其他元素重疊？

#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

如何使一個透明元素與其他元素重疊？

回答

相關問題