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

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作为悬停图像，这些png保持在三个人上。 如果它不应该流动就没有问题。 有没有办法用CSS做到这一点？ 我有点像JavaScript的菜鸟，但是如果有办法，请告诉我。 我认为3 png与背景大小完全相同，并且具有CSS-Mask是解决方案，但即使FF也不支持，因此没有选择。 有任何想法吗？

谢谢大家，请原谅我的英语！

Answer 1

而不是使用background-size:cover或background-size:contain全角bg图像：

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

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