流体背景图像上的流体图像

Question

我需要你的帮助!我的客户想要一个全屏背景的wordpress页面。在其中一个页面上，我需要在全屏背景图像上放置3个图像，这些图像留在确切的位置，并且本身是流动的。图像上的3个人应该是可选择的，并将有一个灯箱与他们的信息。

它应该是这样的：

​

​

背景的位置是这样的：

.bg{
    background: url(images/gang.jpg);
    background-repeat:no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:-700;
    }

所以我需要另外三个pngs作为悬停图像，停留在三个人上。如果它不是流动的，那就没有问题。有没有办法用css做到这一点？我有点javascript菜鸟，但如果有办法，请让我知道。我认为3个pngs在完全相同的大小和背景和CSS-Mask将是一个解决方案，但甚至FF不支持，所以这是没有选择的。有什么想法吗？

谢谢各位，请原谅我的英语！

Answer 1

与使用background-size:cover或background-size:contain处理全宽bg图像相比，请执行以下操作：

• 将内容区域划分为3列(每个人1列)。
• 对每列的宽度使用响应式设计或流畅布局(如果需要，使用JS或jQuery检测浏览器的宽度和高度，并计算每列所需的宽度)。
• 在每一列中添加一个超链接，并将一对img标记添加到使用width:100%; height:auto;的超链接(默认图像和悬停图像)。
• 将鼠标悬停/鼠标出事件处理程序添加到每个超链接(使用JS或jQuery)，用于切换隐藏的img标记。

使用列的优点是，超链接热点将始终与每个图像的大小和位置相匹配(否则对于所有屏幕大小和方向，这可能很难做到)。