我正在使用 reveal.js创建 HTML 幻灯片放映。默认情况下(以及我尝试过的所有主题)reveal.js 以垂直居中的方式布置每张幻灯片的完整内容。它看起来有点像这样:
我如何为 h1 标题或其他 reveal.js 选择器之一设置 CSS 规则,以便 h1
标题保持在幻灯片的顶部,而其余部分仍然垂直居中?我的意思是这样的:
我现在尝试了一些东西。例如
.reveal h1 {
position: absolute;
}
不起作用,因为这样标题不会“脱离”垂直居中的部分
。
我还尝试了层次结构的变化:
.reveal .slides {
position: static;
}
(加上上面的 h1
CSS),但我也无法让它工作。
最后我尝试从 one answer transform 方法,但这也不起作用 - 可能是因为 reveal.js 已经使用了 transform 本身。
知道如何在 reveal.js 中执行此操作吗?
最佳答案
通常这是不可能的,尽管有些事情你可以做,但我认为有点 hacky。您可以在父-父对象上应用 3d 转换。这将强制浏览器在影响 position: fixed
的单独层中绘制父-父对象。子节点。
所以这样的事情应该可行:
.reveal {
transform: translate3d(0,0,0);
}
.reveal h1 {
position: fixed;
top: 0;
left: 0;
}
不过,最好的方法是制作 <section/>
position: static
(您仍然可以使用 display: flex
将其垂直居中)并使用 postion: absolute
在 <h1/>
上.
关于css - 在 reveal.js 幻灯片中如何通过 CSS 在幻灯片顶部定位 H1 标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58024607/