在流体背景图象的流动图象

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

所以我需要三个png作为悬停图像，留在三个人身上。 如果它不应该是流动的就没有问题。 有没有办法用css做到这一点？我是一个javascript noob，但如果有办法，请告诉我。 我认为3 pngs与背景大小完全相同，而CSS-Mask也是一个解决方案，但即便是FF也不支持，所以没有选择。 有任何想法吗？

谢谢你们，请原谅我的英语！

Answer 1

而不是将background-size:cover或background-size:contain与全宽度bg图像一起使用：

• 将内容区域分成3列（每个人1列）。
• 对每列的宽度使用响应式设计或流体布局（或者，如果需要，使用JS或jQuery检测浏览器的宽度和高度，并计算每列所需的宽度）。
• 使用display:block; width:100%;在每列中添加超链接。
• 使用width:100%; height:auto;（默认图片和悬停图片）向超链接添加一对img标记。
• 将mouseover / mouseout事件处理程序添加到每个超链接（使用JS或jQuery），以切换隐藏的img标记。

使用列的优点是超链接热点将始终与每个图像的大小和位置相匹配（否则可能难以对所有屏幕尺寸和方向进行操作）。