在reveal.js中调暗背景图像

dim the background image in reveal.js

本文关键字：背景 图像 reveal js      更新时间：2023-09-26

我使用的是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文档中添加html注释

.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;
 }

请在源代码中检查这一行

 html.blur.backgrounds {     
                   //no (. sign)is required in front of .html or copy the above line and paste it.
相关文章：