模糊绝对背景，同时保留实心边缘 [英] Blur absolute background whilst retaining solid edges
问题描述
我有一个div元素内部和HTML页面正文中的所有其他内容。它具有ID背景。
I have a div element inside and above all other content in the body of a HTML page. It has the ID 'background'.
<body>
<div id="background"></div>
<!-- The rest of the page is below #background -->
</body>
背景有自己的div而不是身体的一部分的原因是因为我已经应用一些载入时的动画背景，我不想这些反映在身体内的其他元素。
The reason the background has its own div and is not simply part of the body is because I have applied a few animations to the background upon load and I don't want these to be reflected on the other elements inside the body.
背景div的CSS看起来像这样：
The CSS for the background div looks like this:
#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的动画，
To save confusion I have removed the animation CSS as that is not the cause of the problem.
以上HTML和CSS的结果如下所示：
The result of the above HTML and CSS looks like this:
（您可能需要打开
在图片的边缘，您会看到模糊的地方，白色背景开始出现通过给它一个内光效果。我试图删除这个，基本上留下图像模糊，但保持锋利的边缘。
Around the edge of the image you will see that where they are blurred the white background starts coming through giving it an inner-glow effect. I am trying to remove this to essentially leave the image blurred but maintain sharp edges.
我非常感谢任何人帮助我，因为它一直让我回来了很多时间。我也知道有一些其他问题类似这一个，但我希望已经使问题更清楚，我也使用一种不同的方法应用背景（绝对div）。
I would highly appreciate anyone helping me around this as it's been holding me back for quite some time. I am also aware there are a few other questions similar to this one, however I hope to have made the problem clearer and I am also using a different method of applying the background (absolute div).
JSFiddle： http://jsfiddle.net/nvUKT/
JSFiddle: http://jsfiddle.net/nvUKT/
推荐答案
你可以削减边缘，这里。
基本上使图像超出视图的所有方左/右/顶部/底部或宽度和高度？），你不会看到发光的边缘。
Basically make the image go outside of the view on all sides (perhaps define the left/right/top/bottom or width and height?) and you won't see the glowing edge.
您不应该需要overflow：hidden，因为您正在使用绝对定位。
You shouldn't need the overflow:hidden because you are using absolute positioning.
最优雅的解决方案，但你可以做的摆脱模糊的边缘是定义两个背景div，一个模糊，一个没有。模糊图像下面的非模糊图像将会消除奇怪的边缘，并且不会增加HTTP请求的数量，因为它是相同的图像。
So, it isn't exactly the most elegant solution, but what you can do to get rid of the blurred edges is to define two background divs, one blurred, and one not. The non-blurry image underneath the blurry one will get rid of the weird edge, and it won't increase the number of HTTP requests, because it's the same image.
<div id="behind"></div>
<div id="background"></div>
CSS
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);
}
这篇关于模糊绝对背景，同时保留实心边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
