web-dev-qa-db-ja.com

ぼかし背景画像から白い境界線を削除する方法

背景画像から白いぼかしボーダーを削除する方法。

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

CSS、私はmargin：-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/

htmlcssblur
15
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フィドル

http://jsfiddle.net/2pgdttLh/

6
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); 
}
33
Moaaz

白い境界線はボディの背景色に由来していることに気づきました。他の色に設定すると、白い境界線の色が設定した色に変わるのがわかります。

これをしてください

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

画像の周りの白い境界線を削除したい場合は、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....

@Primeの回答に基づいて解決した関数は次のとおりです。

画像が機能するためには、画像のwidthとheightを含む<div/>内に配置する必要があります（明示的に設定）。

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

これは私にとってうまくいきました：2つの固定画像を追加しました。1つはz = -1、もう1つはz = 0で、最初の画像をぼかしました。

0
Gaurav Pant

白い境界線がボディの背景色に起因している場合は、margin: 0; on bodyマージンはデフォルトで0ではないため。

0
D D
padding: 10px 10px;

これをCSSに追加して、下部の白いぼかしボーダーを削除します

0
RAJ

コンテナーに負のマージンを追加しました：margin: -5px

0
Troy Co.