Comment faire pour supprimer la bordure blanche de flou d'arrière-plan de l'image

Comment faire pour supprimer le flou blanc de la frontière à partir de l'image d'arrière-plan.

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

CSS, j'ai essayé d'ajouter de la marge:-10px mais il ne fonctionne 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/

Suffit d'enlever toutes les vendeur préfixé flou attributs? par exemple, ( - webkit-filter: blur(5px);-moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);) je ne suis pas sûr si ce est la question?
Espérons que ce lien va vous aider, [Comment appliquer un CSS 3 filtre de flou à une image d'arrière-plan que je me suis mise avec background-image][1] [1]: stackoverflow.com/questions/20039765/...

OriginalL'auteur Prime | 2015-03-05

30

La façon la plus simple de le faire est par l'ajout de 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); 
}
```
la pensée de cette échelle de l'image plus grande, pas tout à fait parfait si vous voulez que l'image reste la même taille et je veux juste supprimer la bordure blanche
Il crée également une barre de défilement pour le dépassement dans les navigateurs webkit qui ne peut pas être supprimée, même avec overflow: hidden. Voir: stackoverflow.com/questions/16687023/...
J'ai fait cela, mais sur Android WebView il y a de défilement. Même si j'ai ajouté overflow:hidden. J'ai le sentiment que c'est parce que mon fond est plus grande que l'élément html
Pourriez-vous expliquer, s'il vous plaît, la raison profonde de ce pépin ?

OriginalL'auteur Moaaz

J'ai ajouté de dépassement, de rembourrage et même de la marge, mais toujours le problème n'est pas résolu. J'ai donc essayé de donner à la balise d'image entre les div. Le problème est 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 fiddle

http://jsfiddle.net/2pgdttLh/

OriginalL'auteur Prime

0
```
padding: 10px 10px;
```
ajouter ceci dans votre css pour supprimer le flou blanc de la frontière par le bas

Vous pouvez blanc abréviation comme ceci: padding: 10px;

OriginalL'auteur RAJ
0

Si vous souhaitez supprimer le cadre blanc autour de l'image vous pouvez utiliser les css Clip de la propriété.

Vous pouvez en 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

OriginalL'auteur Anjum....
0

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

OriginalL'auteur Troy Co.
0

Cela a fonctionné pour moi:
Ajouté fixe de deux images, l'une avec z=-1, d'autres avec z=0, le flou de la première.

OriginalL'auteur Gaurav Pant
0

J'ai remarqué que la bordure blanche vient du corps de la couleur d'arrière-plan. Si vous le réglez à d'autres couleurs, vous pouvez voir le blanc couleur de la bordure de changer à tout ce que vous définissez.

Viens de le faire
```
body {
  background-color: black; //or whatever color is nearest to your blurred background
}
```
OriginalL'auteur djolf

Voici une fonction que j'ai installé sur @Premier 's réponse.

Dans l'ordre pour qu'il fonctionne, l'image doit être placé à l'intérieur d'un <div/> avoir le width et height de l'image (définies explicitement).

    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`
      }
    }

OriginalL'auteur asdfasdfads

Vous devez vous connecter pour publier un commentaire.