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

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

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。

关于我能用来获得理想效果的任何想法？

来源

2014-03-03 Ivan

如果问题是你想让你的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,我能得到每张幻灯片跨越整个窗户的宽度。

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

来源

2016-02-05 22:06:00 MFave

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

回答

相关问题