如何从超大全屏幻灯片中获取100px？

Question

超大型幻灯片可拉伸幻灯片图像以填满整个屏幕。 但是我想在幻灯片放映前有一个100px的标题（而不是在其上方）。 我能怎么做？

FAQ解释了幻灯片不必全屏显示 ，但我仍然希望它是全屏显示，期望从顶部开始100px。

Answer 1

我知道自您提出要求以来已有一段时间，但我已使用它来缩小Supersized占用的空间。

function portfolioSize () {
    $('#supersized').height( $(window).height() - 71 );
}
$(window).load(function() { portfolioSize(); });
$(window).resize(function() { portfolioSize(); });

这将拉动窗口高度并减去必要的像素数量。 下面的两行用于确保在初始加载时以及在调整浏览器窗口大小时应用此功能。

编辑：作为一个旁注，我认为可能还需要以下CSS（自从我在需要此的网站上工作以来，这有点过头了，所以出于其他原因，它们可能在那里）：

#supersized {position: relative !important;}

#supersized li {position: absolute !important; height: 100% !important;}

Answer 2

容易-只需将其添加到CSS中即可：

#supersized li {top:100px !important}

然后使用绝对定位将标题添加到屏幕顶部:)

Answer 3

您可以创建一个具有display: block和margin-top: 100px的容器或div ，并在其中设置幻灯片放映。 或者您可以尝试为幻灯片显示父选择器分配margin-top: 100px或top: 100px 。 （也就是说，如果您使用li或幻灯片放映的某个父容器，则可以将其赋予ul ）。

您甚至可以尝试使用padding-top或border-top并将它们指定为100px。 您有很多选择。

我建议您使用流体布局。 这是现场演示。