不能模糊CSS背景

我已經建立了一個非常簡單的HTML頁面，與之相關聯的這個CSS代碼：不能模糊CSS背景

html { 
    background: url("photourl") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}

然而，這並不模糊。我查看了this示例，並嘗試使用div標記代替它，但我不太明白這裏的推理。爲什麼我發佈的代碼不工作？

來源

2016-05-19 Erik

http://stackoverflow.com/questions/13168142/is-it-possible-to-use-webkit-filter-blur-on -背景圖 – sinisake

您需要使用body來激活過濾器（同樣在Firefox中）並將背景設置爲HTML，因此它是由body繪製的，這是假設用來保存文檔的所有可見內容的標記。

當您將背景設置爲body或HTML時，默認情況下會將其繪製爲HTML，並且在大多數瀏覽器中都不會啓用過濾器。 運行下面的代碼片段並將其懸停以取消設置html背景並查看會發生什麼情況。

如果您在空白文檔上測試，還需要將高度設置爲body，否則它沒有。

https://www.w3.org/TR/css3-background/#special-backgrounds

body { 
 
    background: url("http://dummyimage.com/640x480") no-repeat center center fixed; 
 
    background-size: cover; 
 
    min-height: 100vh; 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
     -o-filter: blur(5px); 
 
      filter: blur(5px); 
 
} 
 
html { 
 
    background: white; 
 
} 
 
/* see what happens when bg is not set also on HTML */ 
 
html:hover { 
 
    background:none; 
 
}

來源

2016-05-19 18:51:31

-1

<!DOCTYPE html> 
<html> 
<head> 
    <title>Stack </title> 
    <style> 
    div { 
     height:500px; 
     width: 100%; 
    background: url("https://udemy-images.udemy.com/course/750x422/394968_538b_5.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
} 
    </style> 
</head> 
<body> 
<div> 

</div> 
Some Text 
</body> 
</html>

我試過這個，它的工作正常。

來源

2016-05-19 18:26:14 bhansa

不能模糊CSS背景

回答

相關問題