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

时间:2014-11-25 18:33:21

标签: javascript css reveal.js

我试图访问reveal.js中background-image的样式有三个原因:

a)我想覆盖overviewmode中的背景图片 b)我想用CSS模糊一些背景

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

a)How to position a background image in reveal.js? b)reveal.js background color choices

但我必须遗漏一些东西,所以我创建了这个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');
 }

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

谢谢,   德克

1 个答案:

答案 0 :(得分:5)

您必须覆盖“.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);
 }