使reveal.js中的背景图像变暗

rok 发表于 Dev

103

年

我正在使用reveal.js：我想将全屏图像显示为背景，一旦移到另一张幻灯片，我就希望对其进行模糊或变暗。看一下Reveal.js中的更改背景图像样式，我已经在CSS中尝试过此操作：

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

然后在我的markdown文档中，我用

.slide: data-background="figs/background.svg" data-background-size="contain" data-state="blur"

这将创建一个<section>带有data-state="blur"内部标签。但是，背景不会模糊-我想念的是什么？

年

只是一个错字：没有“。” 在html前面...

这将起作用，除了模糊之外，还可以进行一些变暗和饱和度更改，这将使前景文本更易于阅读：

html.dim .backgrounds {
   -webkit-filter: blur(4px) saturate(.5) brightness(.8);
   -moz-filter: blur(4px) saturate(.7) brightness(.9);
   -o-filter: blur(4px) saturate(.7) brightness(.9);
   -ms-filter: blur(4px) saturate(.7) brightness(.9);
   filter: blur(4px) saturate(.7) brightness(.9);
}

如果您想让它看起来更加时尚，可以添加一个动画：

@-webkit-keyframes blur-animation {
  0% {
    -webkit-filter: blur(0px) ;
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);

  }
  100% {
    -webkit-filter: blur(4px) saturate(.5) brightness(.8);
    -moz-filter: blur(5px) saturate(.7) brightness(.9);
    -o-filter: blur(5px) saturate(.7) brightness(.9);
    -ms-filter: blur(5px)saturate(.7) brightness(.9);
    filter: blur(5px) saturate(.7) brightness(.9);

  }
}

html.background-blur-animation .backgrounds {
   -webkit-animation-name: blur-animation;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-direction: alternate;
   -webkit-animation-timing-function: ease-out;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-delay: 0s;
 }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。