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

6yoyoihd  于 2023-04-01  发布在  其他
关注(0)|答案(2)|浏览(134)

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。
有什么想法,我可以用什么来获得预期的效果?

ktecyv1j

ktecyv1j1#

如果问题是你希望你的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,我能够让每张幻灯片跨越窗口的整个宽度。
您可能必须根据您想要的输出屏幕来调整这些值,但希望这能解决问题。

u3r8eeie

u3r8eeie2#

正确的语法是width: '100%'

Reveal.initialize({
  // The "normal" size of the presentation, aspect ratio will
  // be preserved when the presentation is scaled to fit different
  // resolutions. Can be specified using percentage units.
  width: '100%',
  height: '100%',

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

  // Bounds for smallest/largest possible scale to apply to content
  minScale: 0.2,
  maxScale: 2.0
});

相关问题