Размыть сторону сайта

размытие бокового сайта [1]: https://i.stack.imgur.com/giurR.jpg

как размыть сторону сайта : https://i.stack.imgur.com/bIgfz.png

#main-style {
position: relative;
}
#main-style::after {
content: "";
width: 100%;
height: 135%;
position: absolute;
top: -30px;
left: 0;
overflow: hidden;
filter: blur(5px);
}

этот код не работает

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
1
0
12
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто замените код, где вы написали: filter: blur(5px); на backdrop-filter: blur(5px)

Объяснение: Код, который вы написали ранее, работает, делая снимок элемента и отображая снимок с эффектом размытия на месте элемента. backdrop-filter вместо этого размывает фон элемента.

Примечание: На данный момент backdrop-filter не работает с браузерами Firefox.

imgur.com/a/36uU0Rz как размыть сторону
Umarjon 10.04.2022 13:05

Я видел изображение. Вам нужно сначала создать поле/область, которая должна быть размыта. Вы можете создать его с помощью элемента div и добавить свойства позиции по своему усмотрению. После того, как вы создали наложение/область, которую хотите размыть, добавьте строку backdrop-filter: blur(10px); к элементу div.

Satyam Mishra 10.04.2022 13:13

Другие вопросы по теме