將reveal.js中的背景圖像調暗

Question

我使用的是reveal.js：我想顯示全屏圖像作爲背景，並且一旦我移動到不同的幻燈片，我想模糊或模糊它。 看着Changing the background-image style in 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); 
} 

，然後我的降價文件中我做

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

它創建了一個<section>標籤與data-state="blur"內的HTML註釋。但是，背景並不模糊 - 我錯過了什麼？

Answer 1

只是一個錯字：沒有「。」在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; 
} 

Answer 2

請在源檢查這條線

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