如何从模糊背景图像中删除白色边框 [英] How to remove white border from blur background image

问题描述

 < div class =background-image> 
如何从背景图片中移除白色模糊边框。 ;< / DIV> 
  

CSS，我尝试添加margin：-10px，但不起作用

  .background-image {
背景：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; 
身高：100％; 
 left：-5px; 
 top：-5px; 
 bottom：-5px; 
位置：固定; 
 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; 
 
} 
  

http://jsfiddle.net/maio/8wq132nd/1/

解决方案

我已经添加了溢出，填充甚至余量，但仍然没有解决问题。所以我试图给div之间的图像标记。问题解决了。

 < div class =background-image> 
< img src =http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpgwidth =100％height =100％/> ; 
< / div> 
  

css

  .background-image {
背景：no-repeat center center fixed; 
 background-size：cover; 
 display：block; 
 left：-5px; 
 top：-5px; 
 bottom：-5px; 
位置：固定; 
 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; 
 
 
  

小提琴

http://jsfiddle.net/2pgdttLh/

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

.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;

 }

http://jsfiddle.net/maio/8wq132nd/1/

解决方案

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 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;

 }

js fiddle

http://jsfiddle.net/2pgdttLh/

这篇关于如何从模糊背景图像中删除白色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！