如何从背景图像中删除白色模糊边框。
<div class="background-image"></div>
CSS,我尝试添加保证金:-10px,但它不起作用
.background-image {
background: no-repeat center center fixed;
background-image: url('http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg') ;
background-size: cover;
display: block;
height: 100%;
left: -5px;
top:-5px;
bottom:-5px;
position: fixed;
right: -5px;
z-index: 1;
margin:0px auto;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
最简单的方法是添加transform:scale(1.1)。试试吧here。
#overlay {
position: fixed;
left: 22.5em;
top: 3em;
height: 75%;
width: 50%;
background: url("https://s-media-cacheak0.pinimg.com/originals/ae/b4/c5/aeb4c53cab2b550187644af503a0f17e.png");
background-size: cover;
filter: blur(9px);
transform: scale(1.1);
}
我已经添加了溢出,填充甚至边距,但仍然没有解决问题。所以我试图在div之间给出图像标签。问题解决了。
<div class="background-image">
<img src="http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg" width="100%" height="100%"/>
</div>
CSS
.background-image {
background: no-repeat center center fixed;
background-size: cover;
display: block;
left: -5px;
top:-5px;
bottom:-5px;
position: fixed;
right: -5px;
z-index: 1;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin:-5px;
}
小提琴
我注意到白色边框来自身体的背景颜色。如果将其设置为其他颜色,则可以看到白色边框颜色更改为您设置的颜色。
就这样做吧
body {
background-color: black; //or whatever color is nearest to your blurred background
}
padding: 10px 10px;
在你的CSS中添加这个以删除底部的白色模糊边框
如果要删除图片周围的白色边框,可以使用css Clip属性。
你可以在这里阅读更多
http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/
http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS
我在容器中加了一个负余量:margin: -5px
这对我有用:添加了两个固定图像,一个是z = -1,另一个是z = 0,模糊了第一个。
这是我根据@Prime的答案确定的功能。
为了使其工作,图像必须位于具有图像的<div/>
和width
的height
内(明确设置)。
function addBlur(style, radius) {
return {
...style,
// https://caniuse.com/#feat=css-filters
filter: `blur(${radius}px)`,
// Works around the white edges bug.
// https://stackoverflow.com/questions/28870932/how-to-remove-white-border-from-blur-background-image
width: `calc(100% + ${2 * radius}px)`,
height: `calc(100% + ${2 * radius}px)`,
marginLeft: `-${radius}px`,
marginTop: `-${radius}px`
}
}