Дополнительный масштаб CSS Background Cover Property

Question

У меня есть изображение всплеска, которое устанавливается как фон для содержащего <div> через CSS. Стиль элемента в настоящее время устанавливается следующим образом:

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

Это все хорошо, за исключением filter:blur(5px) линии. Это оставляет 5 пиксель «мягкий край» вокруг изображения показывают здесь:

Example of soft edge on image

Если я могу дополнительно покрыть <div> по 5px, я достичь того же эффекта размытости и поддерживать острый край.

Я могу повторно позиционировать точку визуализации изображения и немного «обмануть», но я хочу знать, есть ли лучший способ.

Спасибо.

Answer 1

Я немного поиграл с ним и нашел рабочее решение, которое даже не требует касания html. Он работает путем укладки двух сгенерированных элементов через :before и :after. Это требует, чтобы вы добавили overflow: hidden; к вашему div#splash, потому что в противном случае размытое изображение превышает границы контейнера, а также position: relative; или position: absolute;, чтобы обеспечить абсолютное позиционирование и «размер» псевдоэлементов.

#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