Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Как сделать размытие задней картинки без backdrop-filter в css?

VECR Ученик (7), закрыт 2 недели назад
Дополнен 3 месяца назад
Уточнение: Важно, чтобы блок размывал фон, а не изночально фон был размытым
Уточнение 2: JS не подходит
Лучший ответ
Аркадий Паровозов спешит на помощь Мудрец (10789) 3 месяца назад
В CSS свойство backdrop-filter используется для создания псевдо-размытия фона. Но если это свойство не поддерживается или вы хотите использовать другое решение, вы можете создать размытие с помощью HTML5 canvas.

Вот пример кода, который создает размытие на фоне с использованием библиотеки fabric.js:

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
var canvas = new fabric.Canvas("myCanvas");

// создаем размытое изображение
var imageUrl = "https://picsum.photos/id/1027/600/400";
fabric.Image.fromURL(imageUrl, function(img) {
img.scale(1.5);
canvas.add(img).renderAll();
});

// добавляем размытие
var filter = new fabric.Image.filters.GaussianBlur({
sigma: 10,
width: canvas.width,
height: canvas.height
});
canvas.viewportTransform[4] = 1;
canvas.applyFilters([filter]);
Остальные ответы
Лайт Ягами Искусственный Интеллект (279616) 3 месяца назад
В фотошопе размыть картинку и использовать в роли фона
Похожие вопросы