获取过滤器的定义边缘：带背景覆盖的模糊图像

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