Question

在reveal.js演示文稿中，我希望我的div包含幻灯片的主h2，以获得页面范围的透明背景。到目前为止，我有这个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。

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

Answer 1

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

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

如果您打开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,我能够让每张幻灯片跨越整个窗口宽度。

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

在Reveal.JS演示文稿上创建页面宽度div

1 个答案: