Размытие CSS на фоновом изображении, но не на содержании

Я пытаюсь размыть фоновое изображение, но основное содержимое тоже размыто (<span>)

Как я могу размыть фон, не размывая содержимое?

Ответ 1

Вы можете наложить один элемент над размытым элементом, вот так

div {
    position: absolute;
    left:0;
    top: 0;
}
p {
    position: absolute;
    left:0;
    top: 0;
}

Ответ 2

jsfiddle

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter        : blur(10px);
    -moz-filter   : blur(10px);
    -webkit-filter: blur(10px);
    -o-filter     : blur(10px);

    transition        : all 2s linear;
    -moz-transition   : all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition     : all 2s linear;
}

Вы можете размывать фоновое изображение тела, используя body: перед псевдо-классом, чтобы наследовать изображение, а затем размывая его. Оберните все это в класс и используйте javascript, чтобы добавить и удалить класс, чтобы размыть и размазать.

Ответ 3

Добавьте еще один div или img к вашему основному div и размыть его. jsfiddle

.blur {
    background:url('http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465') no-repeat center;
    background-size:cover;
    -webkit-filter: blur(13px);
    -moz-filter: blur(13px);
    -o-filter: blur(13px);
    -ms-filter: blur(13px);
    filter: blur(13px);
    position:absolute;
    width:100%;
    height:100%;
}

Ответ 4

jsfiddle.

<div> 
    <img class="class" src="http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465">
    </img>
    <span>
        Hello World!
    </span>
</div>

Как насчет этого? Нет абсолютного позиционирования на div, но вместо этого на img и span.

Ответ 5

`backdrop-filter`

К сожалению, Mozilla действительно сбросила мяч и не торопилась с этой функцией. Я лично надеюсь, что это войдет в следующую версию Firefox ESR, поскольку именно так будет использоваться следующая основная версия Waterfox.

Статья MDN (Mozilla Developer Network): https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Реализация Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1178765

Со страницы документации MDN:

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);