Question

我正在使用超大型jquery插件来显示全屏背景幻灯片。看看这个网站（这不是我自己的，但我使用相同的结构）：

http://mysampleconcept.com/situs4/

正如您所看到的（例如，如果您为标题添加了一些不透明度），图像从正文的顶部开始。但我希望它们从标题下面开始（这样标题不会覆盖图像的顶部）。

如果你给超大LI提供例如top：100px;整个图像向下移动，使图像的底部消失在我的页脚下方。所以这不是我想要的解决方案。

总而言之，我需要的是将图像拉伸到最大尺寸，同时仍然在窗口内部不会拉伸到顶部100px或底部。

我该怎么做？

抱歉，我的英语不是最好的......

我找到了这个解决方案，但我不知道如何实现它：https://stackoverflow.com/a/12889088/1981981

Answer 1

您可以使用您提到的问题中提供的解决方案作为起点。只需将它放在文档就绪函数中的$ .supersized（）下面即可。由于您需要顶部偏移，我们还必须修改顶部值。我修改了剪辑以满足您的需求：

var portfolioSize = function() {
  var headerOffset = 100;
  $('#supersized').css({ 
    height: $(window).height() - headerOffset,
    top: headerOffset + 'px'
  }); 
};
portfolioSize();
$(window).resize(function() { portfolioSize(); });

我将$（window）.load事件更改为直接调用，因为我们将代码放在文档就绪函数中。

不要忘记修改CSS以进行定位，如另一个答案（https://stackoverflow.com/a/12889088/860205）中所述。

标题下方的超大幻灯片

1 个答案: