獲取過濾器的定義邊緣：帶背景覆蓋的模糊圖像

Question

因此，我想讓我的背景覆蓋整個屏幕並保持固定，但我想使用background-size: cover使其適合不同的屏幕比例。不幸的是，filter: blur()增加了一個令人討厭的模糊的邊緣，我不想要的照片，所以我正在尋找一種方法來解決它。在stackoverflow上，建議通常是將圖片的邊緣移出視口，但顯然background-size: cover根本不起作用。有另一種方法嗎？

CSS片段：

#background { 
    position: fixed; 
    height: 100%; 
    width: 100%;  
    filter: blur(5px); //blur 
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("../Resources/img/background-medium.jpg") no-repeat center 35% fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

（#background只是一個空格）

Answer 1

放置在一個容器中的#background並添加變換：比例（1.1）到#background

.container { 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    overflow: hidden;} 

#background { 
    height: 100%; 
    width: 100%;  
    filter: blur(5px); //blur 
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("../Resources/img/background-medium.jpg") no-repeat center 35% fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    transform: scale(1.1);}