在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

回答

相關問題