液体图像流体背景图像

我需要你的帮助！我的客户想要一个带全屏幕背景的wordpress页面。在其中一页上，我需要在全屏背景图像上放置3张图片，这些图片保持在确切的位置，并且本身是流畅的。图片上的3个人应该可以选择，并且会有一个关于他们的信息的灯箱。液体图像流体背景图像

这是应该的样子：

enter image description here

这是背景如何定位：

.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个png和CSS-Mask将会是一个解决方案，但即使FF也不支持，所以没有选择。有什么建议吗？

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

来源

2012-08-05 kaila

'background-size：contains'可能更安全。使用'背景大小：封面'时，部分图像可能会在某些屏幕尺寸和方向上被裁剪掉。 – 2012-08-05 22:29:46

而不是使用使用background-size:cover或background-size:contain与全宽BG图像：

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

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

来源

2012-08-06 00:07:31

液体图像流体背景图像

回答

相关问题