css - 背景 mask Facebook 个人资料预览 Popover 上的仅 CSS 技术

Question

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

http://i.stack.imgur.com/bD1lk.jpg
(显然我需要 10 个图片帖子..抱歉!)

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

我希望你能帮我解决这个问题。要么是我使用了错误的搜索查询，要么是故意向我隐瞒了解决方案!

提前致谢!干杯

//编辑:

我又玩了一会儿，发现三 Angular 形周围的空间肯定是透明的，如下图所示:

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

这意味着这不是 kalley 展示的技术(这是一个非常好的开始，艰难!)。

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;
}

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