さらにスケールCSSの背景カバープロパティ

Question

CSSを使用して<div>を含む背景に設定されたスプラッシュイメージがあります。次のように要素のスタイルは、現在設定されている：

#splash{ 
    background: url('image'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    filter: blur(5px); 
} 

これはfilter:blur(5px)行以外のすべての罰金です。これは、ここでは、画像のショーの周りに5ピクセル「ソフトエッジ」を残す：

Example of soft edge on image

私はさらに5pxので<div>をカバーすることができる場合、私は同じぼかし効果を達成し、シャープなエッジを維持します。

画像のレンダリングポイントと「チート・イット・オーバー」の位置を少し変えることができますが、より良い方法があるかどうかを知りたいと思います。

ありがとうございました。

Answer 1

私は少し遊んで、ちょうどhtmlに触れることを必要としない実用的な解決策を見つけました。これは、:beforeと:afterを介して2つの生成された要素を積み重ねることによって機能します。それ以外の場合はぼかし画像がコンテナの境界を超え、またposition: relative;またはposition: absolute;が擬似要素の絶対的な位置決めとサイズ設定を行うため、div#splashにoverflow: hidden;を追加する必要があります。

#splash { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 200px; 
 
    width: 280px; 
 
} 
 
#splash:before { 
 
    border: 5px solid white; // user the corresponding backgroundcolor of your page here 
 
    bottom: 0; 
 
    content: ""; 
 
    display: block; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    z-index: 5; 
 
} 
 
#splash:after { 
 
    background: url(http://lorempixel.com/200/280); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    bottom: 0; 
 
    content: ""; 
 
    display: block; 
 
    filter: blur(5px); 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    z-index: 3; 
 
}

<div id="splash"></div>

http://codepen.io/anon/pen/jrBVrp