Размытие изображения с помощью CSS?
на многих смартфонах (например, Samsung Galaxy II) при просмотре фотогалереи ее размытая копия выложена в фоновом режиме. Это может быть достигнуто с помощью CSS динамически (т. е. без того, чтобы копия фотографии была подготовлена заранее сохранена)? Есть ли какой-либо сложный фильтр CSS для размытия изображения?
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); }
Comments