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

reveal.js 演示文稿中,我希望包含主要h2div 幻灯片具有页面范围的透明背景。到目前为止,我有这个 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,,我能够让每张幻灯片跨越窗口的整个宽度。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-09-18
      • 2016-04-14
      • 1970-01-01
      • 2015-09-10
      • 2017-03-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多