更改Reveal.js中的背景图像样式 [英] Changing the background-image style in Reveal.js
问题描述
我试图访问reveal.js中的背景图像的样式有三个原因:
I am trying to access the styles of the background-image in reveal.js for three reasons:
a)我想覆盖背景图像我想用CSS模糊一些背景
a) I'd like to override the background image in the overviewmode b) I'd like to blur some backgrounds with CSS
我发现了两篇关于SO的文章帮助我:
I found two articles on SO that helped me:
a)如何定位背景image in reveal.js?
b) reveal.js背景颜色选择
但是我必须缺少一些东西,所以我创建了这个jsFiddle来演示这个问题:
http://jsfiddle.net/dirkk0/asya4grv/
But I must be missing something, so I created this jsFiddle to demonstrate the problem: 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');
}
您可以看到突然出现两个背景图片。我做错了什么?
You can see that there are suddenly two background images. What am I doing wrong?
感谢,
Dirk
Thanks, Dirk
推荐答案
您必须覆盖.backgrounds类,而不是.state-background。背景图像不放置在.slides中。这就是为什么你的CSS代码不会模糊的背景图片。
You have to overwrite the ".backgrounds" class instead ".state-background". Background images are not placed in ".slides". That's why your CSS code wont blur the background images.
.backgrounds {
-webkit-filter: blur(5px);
-moz-filter: blur(50px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
这篇关于更改Reveal.js中的背景图像样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!