1

我需要你的帮助！我的客户想要一个全屏背景的 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 也不支持，所以没有选择。有任何想法吗？

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

4

1 回答 1

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 标签。

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

于 2012-08-06T00:07:31.577 回答