模糊绝对背景，同时保留实心边缘答案

【问题标题】：Blur absolute background whilst retaining solid edges模糊绝对背景，同时保留实心边缘
【发布时间】：2013-12-10 11:42:13
【问题描述】：

我有一个 div 元素，在 HTML 页面的正文中，它位于所有其他内容之上。它的 ID 为“背景”。

<body>
    <div id="background"></div>
    <!-- The rest of the page is below #background -->
</body>

背景有自己的 div 而不仅仅是主体的一部分，是因为我在加载时将一些动画应用于背景，我不希望这些动画反映在主体内的其他元素上。

背景 div 的 CSS 如下所示：

#background {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: url(backgrounds/moon.png) no-repeat center center fixed;
    filter: blur(7px) brightness(0.75);
    -webkit-filter: blur(7px) brightness(0.75);
    -moz-filter: blur(7px) brightness(0.75);
    -ms-filter: blur(7px) brightness(0.75);
    -o-filter: blur(7px) brightness(0.75);
}

为了避免混淆，我删除了动画 CSS，因为这不是问题的原因。

上述 HTML 和 CSS 的结果如下所示：

（您可能希望在新标签页中打开图像以更清晰地看到边缘模糊）

在图像的边缘，您会看到它们被模糊的地方开始出现白色背景，给它一种内发光的效果。我正在尝试删除它以使图像基本上保持模糊但保持锐利的边缘。

我非常感谢任何帮助我解决这个问题的人，因为它已经阻碍了我很长一段时间。我也知道还有其他一些与此类似的问题，但是我希望使问题更清楚，并且我还使用了另一种应用背景的方法（绝对 div）。

JSFiddle：http://jsfiddle.net/nvUKT/

【问题讨论】：

您能否在 www.jsfiddle.net 上发布您的代码？所以我们可以在那里尝试一下。
@PM 是的，我现在就这样做并编辑问题，2 分钟！
@PM 我已经添加了 JSFiddle：jsfiddle.net/nvUKT

标签： html css

【解决方案1】：

您可以像 here 那样剪掉边缘。

基本上使图像在所有侧面都超出视图（也许定义左/右/上/下或宽度和高度？）并且您不会看到发光的边缘。

您不应该需要溢出：隐藏，因为您使用的是绝对定位。

编辑

因此，这并不是最优雅的解决方案，但您可以做的是定义两个背景 div，一个模糊，一个不模糊。模糊下面的非模糊图像会去除奇怪的边缘，并且不会增加HTTP请求的数量，因为它是相同的图像。

HTML

<div id="behind"></div>
<div id="background"></div>

CSS

#behind, #background {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: url(http://placehold.it/1920x1080) no-repeat center center fixed;
}
#background {
    filter: blur(7px) brightness(0.75);
    -webkit-filter: blur(7px) brightness(0.75);
    -moz-filter: blur(7px) brightness(0.75);
    -ms-filter: blur(7px) brightness(0.75);
    -o-filter: blur(7px) brightness(0.75);
}

JSFiddle

【讨论】：

您能提供一个代码示例吗？如果没有将宽度和高度物理定义为整数，我看不到这个工作，我使用的是 100%。然而，这可能只是我很愚蠢
当我拿到我的电脑时，我会马上回来举个例子。无法在移动设备上使用 JSFiddle。
如果您更改代码并放置图像标签而不是背景，此解决方案将起作用。
@randak 谢谢，感谢。我正在玩，我似乎无法摆脱所有的边缘模糊，只是一点点。希望你能有更好的结果！ :)
@randak 抱歉耽搁了，但答案很棒。良好的主动性和逻辑！

【解决方案2】：

要在单个<div> 中执行此操作，您可以使用:before 和:after CSS 选择器，复制背景图像并仅模糊最前面的图像。这适用于全 div 模糊背景图像。

.background-image:before, .background-image:after {
        background:
            url("http://placehold.it/1920x1080")
            no-repeat
            fixed
            center top;
        background-size: cover;
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .background-image:before {
        z-index: -2;
    }

    .background-image:after {
        z-index: -1;
        -webkit-filter: blur(7px) brightness(0.75);
        -moz-filter: blur(7px) brightness(0.75);
        -ms-filter: blur(7px) brightness(0.75);
        -o-filter: blur(7px) brightness(0.75);
        filter: blur(7px) brightness(0.75);
    }

【讨论】：

【解决方案3】：

为避免重复 div，您可以将图像比其容器大，并将其定位在 0.0 之前。

所以：

#background{
    position: absolute;
    top: -10px;
    left: -10px;
    background: url(backgrounds/moon.png) no-repeat;
    background-size: cover;
    width: 102%;
    height: 102%;

    filter: blur(7px) brightness(0.75);
    -webkit-filter: blur(7px) brightness(0.75);
    -moz-filter: blur(7px) brightness(0.75);
    -ms-filter: blur(7px) brightness(0.75);
    -o-filter: blur(7px) brightness(0.75);
}

【讨论】：

【解决方案4】：

如果您希望避免创建额外的 div，另一种选择是将 transform: scale() 应用于 #background 元素并将 overflow: hidden 应用于主体或父元素：

body {
    overflow: hidden;
}

#background {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: url(http://placehold.it/1920x1080) no-repeat center center fixed;
    filter: blur(7px) brightness(0.75);
    -webkit-filter: blur(7px) brightness(0.75);
    -moz-filter: blur(7px) brightness(0.75);
    -ms-filter: blur(7px) brightness(0.75);
    -o-filter: blur(7px) brightness(0.75);

    transform: scale(1.05);
}

JS Fiddle

【讨论】：