Html 如何从模糊背景图像中删除白色边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28870932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove white border from blur background image
提问by Prime
How to remove the white blur border from the background image.
如何从背景图像中去除白色模糊边框。
<div class="background-image"></div>
CSS, i tried adding margin:-10px but it doesn't work
CSS，我尝试添加 margin:-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;
}
采纳答案by Prime
I have added overflow, padding and even margin, but still the problem not solved. So i tried to give the image tag between div. Problem solved.
我添加了溢出、填充甚至边距，但问题仍未解决。所以我试图在 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
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;
}
js fiddle
js小提琴
回答by Moaaz
The simplest way to do it is by adding transform: scale(1.1). Try it here.
最简单的方法是添加transform: scale(1.1)。在这里试试。
#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);
}
回答by W4G1
Up-to-date answer (March 2020)
最新答案（2020 年 3 月）
You can achieve this effect with just css by using backdrop-filteron an overlaying element.
您可以通过backdrop-filter在覆盖元素上使用 css 来实现此效果。
.background-image::before {
content: "";
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
-webkit-backdrop-filter: blur(5px); /* apply the blur */
backdrop-filter: blur(5px); /* apply the blur */
pointer-events: none; /* make the pseudo class click-through */
}
.background-image {
position: relative;
width: 710px;
height: 444px;
background: no-repeat center center;
background-image: url('https://besthqwallpapers.com/Uploads/26-5-2019/94041/thumb2-tesla-model-x-2019-exterior-front-view-new-gray-model-x.jpg');
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}<div class="background-image"></div>Keep in mind that this is not supportedin IE and it only works in firefox if it is explicitly enabled.
请记住，这在 IE 中不受支持，并且只有在明确启用的情况下才能在 Firefox 中工作。
回答by Anjum....
If you want to remove white border around picture you can use css Clip property.
如果要删除图片周围的白色边框，可以使用 css Clip 属性。
You can read more here
你可以在这里阅读更多
http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/
http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/
http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS
http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS
回答by Troy Co.
I added a negative margin to the container: margin: -5px
我向容器添加了负边距： margin: -5px
回答by Gaurav Pant
This worked for me: Added two fixed images, one with z=-1, other with z=0, blurred the first one.
这对我有用：添加了两个固定图像，一个 z=-1，另一个 z=0，模糊了第一个。
回答by catamphetamine
Here's a function I settled on based on @Prime 's answer.
这是我根据@Prime 的回答确定的一个函数。
In order for it to work the image must be positioned inside a <div/>having the widthand heightof the image (explicitly set).
为了使其工作，图像必须位于<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`
}
}
回答by D D
If the white borders are caused by the background color of the body, apply margin: 0;on bodysince margins are not 0 by default;
如果白色边框是由 body 的背景色引起的，则应用margin: 0;on，body因为默认情况下边距不为 0；
回答by RAJ
padding: 10px 10px;
add this in your css to remove the white blur border for bottom
将此添加到您的 css 中以删除底部的白色模糊边框
