Как добавить размытие позади HTML-элемента?
Я покопался в интернете и нашел некоторые вещи, которые, кажется, движутся в правильном направлении, но ничего, что казалось полным решением. Вот что я нашел:
- Предстоящее свойство CSS
backdrop-filter, который в настоящее время поддерживается только в Safari и за флагом разработчика Chrome. Именно то, что мне нужно, но для этого нужна лучшая поддержка. - Библиотека JavaScript Blur.js, которая, кажется, почти исчезла из Интернета. (Даже официальный сайт ведет на страницу GoDaddy.) Возможно, это было решение, но я не уверен, что случилось с проектом.
- Библиотека JavaScript StackBlur, которая кажется блестящим решением для размытия, но у меня нет ни малейшего представления, как бы использовать ее для размытия за элементом.
Есть идеи? Возможно, кто-то использовал StackBlur для этого и имеет CodePen, через который я мог бы проткнуть или что-то в этом роде? По сути, у меня есть сетка элементов, каждый из которых использует jQuery UI Draggable, который я хотел бы сделать полупрозрачным с хорошим размытием позади каждого. Размытие должно обновляться, как и ожидалось, когда элементы перетаскиваются.
Последняя мысль Сейчас я использую только "CSS-решение", но оно имеет некоторые раздражающие ограничения. Если вы собираетесь предложить решение с использованием только CSS, то, вероятно, то, что я уже делаю. Проблемы с этим следующие:
- Область за элементом на самом деле не размыта, просто произвольное фоновое изображение.
- Края или размытая область не полностью срезают размытость. Это немного сложно описать, но просто поверь мне, когда я говорю, что это не выглядит великолепно.
Если я не пропустил что-то огромное во всех моих поисках, я думаю, что для этого мне понадобится JS.
1 ответ
Бармар прав. Дать два объекта одинаково absolute позиция. Размыть один объект и назначить его ниже z-index, Боб твой дядя.
Если вам нужны более четкие подробности, пожалуйста, опубликуйте свой код, следуя рекомендациям SO.