0

因此，Facebook 会显示一个弹出框，显示您悬停在其姓名上的人的个人资料预览。如果您在复制此内容时遇到问题，因为弹出框总是出现在名称的顶部，只需向下滚动一点，使其没有足够的空间显示在名称上方。这是一个例子：

http://i.stack.imgur.com/bD1lk.jpg
（显然我需要 10 个图片帖子.. 对不起！）

这个小三角形显示了其各自背景图像的一部分。使用什么技术来实现这一点？我还没有想出一个解决方案。由于它似乎不是 css3 掩码并为每张图片生成单个图像有点矫枉过正......

我希望你能在这里帮助我.. 要么我只是使用了错误的搜索查询，要么解决方案故意对我隐藏！

提前致谢！干杯

// 编辑：

我又玩了一会儿，发现三角形周围的空间绝对是透明的，如下图所示：

http://i.stack.imgur.com/7jBIj.png

这意味着这不是 kalley 所展示的技术（这是一个非常好的开始，很难！）。

4

1 回答 1

0

你可以尝试这样的事情：http: //jsfiddle.net/Z6fYj/

它要求您知道它将位于其之上的背景颜色，但您可以看到效果。

.img {
    background: url(...) no-repeat;
    background-size: 500px auto;
    /* -10px relates to the top position of :before */
    background-position: 0 -10px;
    width: 500px;
    height: 372px;
    position: relative;
    margin-top: 20px;
}
.img:before {
    background: url(...) no-repeat;
    background-size: 500px auto;
    /* -40px is the opposite of the left property */
    background-position: -40px 0;
    position: absolute;
    width: 0;
    top: -10px;
    left: 40px;
    content: '';
    border-bottom: 10px solid transparent;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
}

我不确定这是否正是 facebook 的做法（似乎无法手动触发鼠标悬停......），但这可能会给你一个开始。

于 2013-07-08T23:05:23.773 回答