Question

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

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

这个小三角形显示了相应背景图像的一部分。用什么技术来实现这个目标？我还没有找到解决方案。因为它似乎不是css3屏蔽并且为每张图片生成单个图像会有点矫枉过正......

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

提前致谢！干杯

//编辑：

我已经玩了一点，并发现，三角形周围的空间肯定是透明的，如下图所示：

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正在做的事情（似乎无法手动触发鼠标悬停......），但这可能会给你一个开始。

在Facebook个人资料预览Popover上隐藏CSS技术的背景

1 个答案: