CSS - 背景が薄くなっているエッジを削除する

この問題は、画像がエッジでフェードしているところで発生しています。それらがエッジ上で消える理由は、フィルタのぼやけのためです。 （私はぼかしフィルタが必要です） どのように私はフェードを取り除くか、CSSのぼかし効果を行うための別の方法ですか、または私はそれをPhotoshopで行う必要がありますか？CSS - 背景が薄くなっているエッジを削除する

.bg-img{ 
 
\t background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed; 
 
\t background-size: cover; 
 
\t display: block; 
 
\t filter: blur(5px); 
 
\t -webkit-filter: blur(5px); 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 1; 
 
\t padding: 0; 
 
\t margin: 0 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <link rel="stylesheet" href="framside.css"> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="bg-img"></div> 
 
\t </body> 
 
</html>

出典

2016-04-12 Yonose

ここを見てくださいhttp://stackoverflow.com/questions/12224320/defined-edges-with-css3-filter-blur – Anfuca

また、上端、右端、下端、左端を負の％でオフセットすることもできます。オフセットを幅と高さの％として追加します。これは、もちろん、画像を少し切り取ることにあまり関心がないと仮定した場合です。

https://jsfiddle.net/mwzddfs6/

<div class="content"></div> 

.content { 
    overflow: auto; 
    position: relative; 
} 
.content:before { 
    content: ""; 
    position: fixed; 
    left: -1%; 
    right: -1%; 
    top: -1%; 
    bottom: -1%; 
    z-index: -1; 

    display: block; 
    background-image: url(http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg); 
    background-size: cover; 
    width: 102%; 
    height: 102%; 

    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}

PS：前に、コードクリーナーを維持するために：私はまた、コンテンツを使用することを好みます。個人的な好みは、すべてです。

出典

2016-04-12 07:12:54 praveensewak

ありがとう、素晴らしい作品！ – Yonose

あなたはぼやけたバージョンの背後に非ぼかしたバージョン積み重ねることができます：私は単に複製され、その後、親からぼかしを削除

.bg-img-solid{ 
 
\t background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed; 
 
\t background-size: cover; 
 
\t display: block; 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 1; 
 
\t padding: 0; 
 
\t margin: 0 
 
} 
 

 
.bg-img{ 
 
\t background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed; 
 
\t background-size: cover; 
 
\t display: block; 
 
\t filter: blur(5px); 
 
\t -webkit-filter: blur(5px); 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 1; 
 
\t padding: 0; 
 
\t margin: 0 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <link rel="stylesheet" href="framside.css"> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="bg-img-solid"><div class="bg-img"></div></div> 
 
\t </body> 
 
</html>

をdiv。

出典

2016-04-12 06:56:58 Scott

私はこれについて考えましたが、より良い方法になるはずですか？ – Yonose

CSS - 背景が薄くなっているエッジを削除する

答えて

関連する問題