Как удалить белую рамку из размытия

Ответ 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;

 }

JS Fiddle

http://jsfiddle.net/2pgdttLh/

Ответ 2

Самый простой способ сделать это - добавить 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); 
}

Ответ 3

padding: 10px 10px;

добавьте это в свой CSS, чтобы удалить границу белого размытия внизу

Ответ 4

Если вы хотите удалить белую рамку вокруг изображения, вы можете использовать свойство 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

Ответ 5

Я добавил отрицательный запас в контейнер: margin: -5px

Ответ 6

Это сработало для меня: добавили два фиксированных изображения, одно с z = -1, другое с z = 0, размытое первое.

Ответ 7

Я заметил, что белая рамка происходит от цвета фона тела. Если вы установите его на другие цвета, вы увидите, что цвет белой границы меняется на тот, который вы установили.

Просто сделай это

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

Ответ 8

Здесь я остановился на функции, основанной на ответе @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'
      }
    }

Ответ 9

Я использую контур, который соответствует радиусу размытия в 2 раза. Так:

    element: {
        filter: blur(5px)
        outline: solid 10px
    }