Размытие изображения с помощью CSS?


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

6   51   2012-12-03 14:59:59

6 ответов:

можно использовать CSS3 filters. Они относительно просты в реализации, хотя поддерживаются только на webkit в данный момент. Браузер Samsung Galaxy 2 должен поддерживать, хотя, как я думаю, это браузер webkit?

С 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);

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

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

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

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

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

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