在 Reveal.JS 演示文稿上制作一个页面宽度的 div答案

【问题标题】：Make a page-width div on Reveal.JS presentation在 Reveal.JS 演示文稿上制作一个页面宽度的 div
【发布时间】：2016-02-06 06:06:00
【问题描述】：

在reveal.js 演示文稿中，我希望包含主要h2 的div 幻灯片具有页面范围的透明背景。到目前为止，我有这个 css：

section div.haikubar {
  padding: 60px 10px 60px 10px;
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: rgba(0,0,0,0.5) 0px 0px 200px;
}

我尝试了width: 100% 和其他一些东西，但“栏”永远不会扩展页面的全宽。它居中，幻灯片背景显示在每一侧。

这是一个 CodePen 的剪切/粘贴来自构建的演示文稿，其中包含大部分 HTML/CSS/JS。

关于我可以使用什么来获得预期效果的任何想法？

【问题讨论】：

标签： css reveal.js

【解决方案1】：

如果问题是你希望你的 div 占据窗口的整个宽度，那么我相信我遇到了类似的问题，我通过以下方式解决了它。

通过在 css 中设置 width: 100%;，div 将占据 100% 的幻灯片宽度，具体取决于reveal.js 配置为显示幻灯片的方式。对于默认配置，这意味着幻灯片可能不会跨越窗口的整个宽度。

如果您打开 Reveal.js，您将能够找到并修改配置默认值：

// Configuration defaults, can be overridden at initialization time
        config = {

            // The "normal" size of the presentation, aspect ratio will be preserved
            // when the presentation is scaled to fit different resolutions
            width: 960,
            height: 700,

            // Factor of the display size that should remain empty around the content
            margin: 0.1,

通过将纵横比和边距更改为：width:1920, height:1024, margin:0,，我能够让每张幻灯片跨越窗口的整个宽度。

您可能需要根据您的预期输出屏幕来调整这些值，但希望这可以解决问题。

【讨论】：