模糊绝对背景,同时保持坚实的边缘
我在HTML页面的主体内部和上面都有一个div元素.它具有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/
您可以像在此处一样切断边缘.
基本上使图像在所有面上都位于视图之外(可能定义左/右/上/下或宽度和高度？),您将看不到发光边缘.
您不应该需要溢出:隐藏,因为您使用的是绝对定位.
编辑
因此,它并不是最优雅的解决方案,但是你可以做的是摆脱模糊的边缘是定义两个背景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);
}
| 归档时间： |
|
| 查看次数： |
7744 次 |
| 最近记录： |