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

How to take 100px from a Supersized fullscreen slideshow?

本文关键字：幻灯片 获取 100px      更新时间：2023-09-26

超大幻灯片扩展幻灯片图像以填充屏幕。然而，我希望在幻灯片放映之前有一个100px的标题（而不是在上面）。我该怎么办？

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

我知道你已经问了一段时间了，但我用这个来缩小Supersize所占的空间。

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;}

简单-只需将其添加到CSS:

#supersized li {top:100px !important}

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

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

您甚至可以尝试padding-top或border-top，并为它们分配100px。你有很多选择。

我建议你使用射流布局这里是一个现场演示。

相关文章：