Размытие изображения через CSS?

На многих смартфонах (пример Samsung Galaxy II), когда вы просматриваете фотогалерею, ее размытая копия выложена в фоновом режиме. Может ли это быть достигнуто с помощью CSS динамически (т.е. Без копии сохраненной фотографии заранее)? Есть ли какой-либо сложный фильтр CSS-изображений, чтобы размыть изображение?

Ответ 1

Вы можете использовать фильтры CSS3. Их относительно легко реализовать, хотя они поддерживаются только в webkit. Samsung Galaxy 2 браузер должен поддерживать, хотя, как я думаю, что веб-браузер?

Ответ 2

С помощью CSS3 мы можем легко настроить изображение. Но помните, что это не меняет изображение. Отображается только настроенное изображение.

Смотрите следующий код для более подробной информации.

Чтобы сделать изображение серым:

img {
 -webkit-filter: grayscale(100%);
}

Чтобы придать сепии вид:

img {
 -webkit-filter: sepia(100%);
}

Чтобы настроить яркость:

img {
 -webkit-filter: brightness(50%);
}

Чтобы настроить контраст:

img {
 -webkit-filter: contrast(200%);
}

Размыть изображение:

img {
 -webkit-filter: blur(10px);
}

Вы должны также сделать это для другого браузера. То есть включают все заявления CSS

  filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);

Использовать несколько

 filter: blur(5px) grayscale(1);

Codepen Demo

Ответ 3

Этот код работает для эффекта размытия для всех браузеров.

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

Ответ 4

Да, используется следующий код, который позволит применить эффект размытия к указанному изображению, а также позволит вам выбрать размер размытия.

img {
  -webkit-filter: blur(10px);
    filter: blur(10px);
}

Ответ 5

Фильтры CSS3 в настоящее время работают только в браузерах webkit (сафари и хром).

Ответ 6

img {
  filter: blur(var(--blur));
}