Facebook个人资料预览Popover上的背景屏蔽CSS技术

Question

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

https://i.stack.imgur.com/bD1lk.jpg
（很明显，我需要10个图片帖子…对不起！）

这是一个小三角形，它显示了各自背景图像的一部分。使用了什么技术来实现这一点？我还没能想出一个解决办法。由于这似乎不是css3屏蔽，为每张图片生成一张图像会有点过头。。。

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

提前感谢！干杯

//编辑：

我玩了更多的游戏，发现三角形周围的空间绝对是透明的，如下图所示：

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

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

Answer 1

您可以尝试以下操作：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;
}

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