web-dev-qa-db-fra.com

Comment supprimer la bordure blanche du flou

Comment supprimer la bordure de flou blanc de l'image d'arrière-plan.

<div class="background-image"></div>

CSS, j'ai essayé d'ajouter une marge: -10px mais ça ne marche pas

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

htmlcsshtml5css3blur
8
Prime

J'ai ajouté débordement, remplissage et même marge, mais le problème n'est toujours pas résolu. J'ai donc essayé de donner le tag image entre div. Problème résolu.

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

http://jsfiddle.net/2pgdttLh/

5
Prime

La façon la plus simple de le faire est d’ajouter transform: scale (1.1). Essayez ici .

#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); 
}
30
Moaaz

Si vous souhaitez supprimer une bordure blanche autour de l'image, vous pouvez utiliser la propriété css Clip. 

Vous pouvez lire plus ici

http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS

0
Anjum....

J'ai remarqué que la bordure blanche vient de la couleur de fond du corps. Si vous le définissez sur d'autres couleurs, vous pouvez voir la couleur de la bordure blanche se changer en ce que vous définissez.

Fais juste ça

body {
  background-color: black; //or whatever color is nearest to your blurred background
}
0
djolf

Cela a fonctionné pour moi: Ajout de deux images fixes, une avec z = -1, l'autre avec z = 0, floue la première. 

0
Gaurav Pant
padding: 10px 10px;

ajoutez ceci dans votre css pour supprimer la bordure de flou blanche en bas

0
RAJ

J'ai ajouté une marge négative au conteneur: margin: -5px

0
Troy Co.