Question

我正在创建一个Facebook应用程序并与iframe中的facebook设计流程保持一致，我正在＆＃34;复制＆＃34;一些Facebook的功能。我遇到问题的是使用父背景图像的带有箭头的悬停卡弹出对话框。

在下面的链接中，您将看到我正在尝试做的事情。 http://grab.by/k9Na

在那张照片中，我使用了具有相同位置属性的2个绝对div。第一层具有透明背景图像，其具有倒置的白色箭头（与背景颜色相同）。第二层设置为封面照片，并与第一层重叠，使其具有箭头外观。

我无法将封面照片的正确位置放入第二个箭头图层。我试着找了一会儿空了。我也检查了facebook的代码并且更加困惑。

Answer 1

我明白了。它可能不是最好或最有效的解决方案，但它有效。

http://grab.by/kapw

在上面的图片中，您将看到我绘制了3个蓝框（div）。这些盒子放在一个绝对容器内，宽度与对话框弹出窗口相同，固定高度为15px。

根据哪个面盒悬挂在容器上方来定位3个盒子。在这个例子中，左边的第二个框正在盘旋 - 注意箭头指向它。

将“左”div宽度设置为面部框左侧位置。

将“ bg ”div左侧位置设置为左侧面部框位置。

将'右'div左侧位置设置为左侧和bg div宽度的总和。

将'右'div宽度设置为父宽度减去左边和bg宽度的总和。

将div 容器的zIndex设置为较大的数字。

在 bg div内部html中放置透明反转箭头



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

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

中提琴！

对话框背景图像与箭头使用相同的背景

1 个答案: