在 Reveal.js 中更改背景图像样式

Changing the background-image style in Reveal.js

本文关键字:背景 图像 样式 Reveal js      更新时间:2023-09-26

我正在尝试访问 reval 中背景图像的样式.js原因有三

a) 我想在概览模式下覆盖背景图像b)我想用CSS模糊一些背景

找到了两篇关于SO的文章,对我有帮助:

a) 如何在显示.js中定位背景图像?b) 揭示.js背景颜色选择

但是我一定错过了一些东西,所以我创建了这个jsFiddle来演示这个问题:http://jsfiddle.net/dirkk0/asya4grv/

 html.thisState .state-background {
     /* background image is NOT changed, but the backgroundcolor changes */
     background-color: rgba(0, 0, 0, 0.8);
     background-image: url('http://pngimg.com/upload/small/key_PNG1180.png');
 }

你可以看到突然有两个背景图像。我做错了什么?

谢谢 匕首

你必须覆盖".backgrounds"类而不是".state-background"。背景图像不会放置在".slides"中。这就是为什么您的CSS代码不会模糊背景图像的原因。

.backgrounds {
     -webkit-filter: blur(5px);
     -moz-filter: blur(50px);
     -o-filter: blur(5px);
     -ms-filter: blur(5px);
     filter: blur(5px);
 }