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

【问题标题】：Fluid images on fluid background image流体背景图像上的流体图像
【发布时间】：2012-08-02 22:49:14
【问题描述】：

我需要你的帮助！我的客户想要一个全屏背景的 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 菜鸟，但如果有办法，请告诉我。我认为 3 个与背景大小完全相同并使用 CSS-Mask 的 png 将是一个解决方案，但即使是 FF 也不支持，所以没有选择。有任何想法吗？

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

【问题讨论】：

background-size:contain 可能更安全。使用background-size:cover，部分图像可能会在某些屏幕尺寸和方向上被裁剪掉。

标签： css wordpress responsive-design

【解决方案1】：

而不是将background-size:cover 或background-size:contain 与全角背景图像一起使用：

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

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

【讨论】：