在reveal.js演示文稿中,我希望包含主h2
的div
幻灯片具有页面范围的透明背景。到目前为止,我有以下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。
有什么想法,我可以用什么来获得预期的效果?
2条答案
按热度按时间ktecyv1j1#
如果问题是你希望你的div占据整个窗口的宽度,那么我相信我有一个类似的问题,我用下面的方式解决了它。
通过在css中设置
width: 100%;
,div将根据reveal.js如何配置来显示幻灯片,占据幻灯片宽度的100%。对于默认配置,这意味着幻灯片可能不会跨越窗口的整个宽度。如果打开Reveal.js,您将能够找到并修改配置默认值:
通过将纵横比和边距更改为:
width:1920, height:1024, margin:0,
我能够让每张幻灯片跨越窗口的整个宽度。您可能必须根据您想要的输出屏幕来调整这些值,但希望这能解决问题。
u3r8eeie2#
正确的语法是
width: '100%'
: