带有箭头的对话背景图像使用相同的背景

我正在制作一个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

带有箭头的对话背景图像使用相同的背景

回答

相关问题