it-swarm.com.ru

Как убрать белую рамку с размытого фонового изображения

Как убрать белую размытую границу с фонового изображения.

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

CSS, я попытался добавить поля: -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;

 }

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

8
Prime

Я добавил переполнение, отступы и даже поля, но проблема до сих пор не решена. Поэтому я попытался дать тег изображения между 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/

5
Prime

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

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

0
Anjum....

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

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

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

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

0
Gaurav Pant
padding: 10px 10px;

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

0
RAJ

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

0
Troy Co.