帶有箭頭的對話背景圖像使用相同的背景

我正在製作一個Facebook應用程序，並與iframe中的Facebook設計流程保持一致，我正在「複製」一些facebook功能。我遇到的問題是使用父級背景圖像的箭頭懸停卡彈出式對話框。帶有箭頭的對話背景圖像使用相同的背景

在下面的鏈接中，您將看到我正在嘗試做什麼。 http://grab.by/k9Na

在該圖片中，我使用了2個具有相同位置屬性的絕對div。第一層有一個帶有倒置白色箭頭的透明背景圖像（與背景顏色相同）。第二層被設置爲封面照片，並被第一層重疊，使其具有箭頭外觀。

我無法將封面照片的正確位置放入第二個箭頭圖層。我試圖尋找一段時間空了。我也檢查了Facebook的代碼，並且更加困惑。

來源

2013-02-24 mguyco

我想通了。它可能不是最好或最有效的解決方案，但它的工作原理。

http://grab.by/kapw

在上面的PIC，你會看到我制定了3個藍色盒子（div的）。這些框被放置在一個絕對容器內，與對話框彈出窗口的寬度相同，固定高度爲15px。

這3個盒子的放置位置是基於哪個臉盒在容器上方懸浮。在這個例子中，從左邊開始的第二個盒子被徘徊 - 注意箭頭指向它。

將'左''div寬度設置爲面部框左側位置。

將'''div'左側位置設置爲臉部左側位置。

將'right'div的左邊位置設置爲left和bg div寬度的總和。

將'正確的'div寬度設置爲父寬度減去左寬度和bg寬度的總和。

設置DIV 容器到大量的zIndex的。

放置一個透明倒箭頭的BG內格內的HTML

 <div class="container"> 
    <div class="left"></div> 
    <div class="bg"> 
    <img src="inversedArrow.png"> 
    </div> 
    <div class="right"></div> 
</div>

中提琴！

來源

2013-02-24 20:36:13 mguyco

帶有箭頭的對話背景圖像使用相同的背景

回答

相關問題