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只是一个空div）

Answer 1

将#background放在容器中，并将 transform：scale（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);}

获取滤镜的定义边缘：带背景封面的模糊图像

1 个答案: