javascript - 如何从超大全屏幻灯片中获取 100 像素？

Question

超大幻灯片会拉伸幻灯片图像以填满屏幕。然而，我想在幻灯片之前有一个 100px 的标题（而不是在它上面）。我能怎么做？

常见问题解答解释说幻灯片不需要是全屏的，但我仍然希望它是全屏的，期望距离顶部 100 像素。

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

您可以创建一个容器或div使用display: blockandmargin-top: 100px并在其中设置您的幻灯片。或者您可以简单地尝试将margin-top: 100px或分配top: 100px给您的幻灯片父选择器。（也就是说，ul如果您使用li幻灯片或某些父容器，您可以将其提供给）。

您甚至可以尝试使用padding-toporborder-top并为它们分配 100 像素。你有很多选择。

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

Answer 3

简单 - 只需将其添加到 CSS 中：

#supersized li {top:100px !important}

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