CSS Как заполнить фон под картинкой шумом из палитры изображения?

Question

[Igor A]

Доброго времени суток!

Есть слайдер, в нем располагаются разного размера изображения, хотелось бы заполнить белый фон какой нибудь ненавязчивой цветовой палитрой. В мобильных приложениях например фон заполняется изображением и заблюривается где то на 70%.
Решение на JS не интересует. В целях экономии ресурсов хочется сделать простое решение, которое не будет грузить процессор и тормозить браузер. На странице может быть до 15 слайдеров, в каждом до 10 изображений.

Comments

[kulaeff]

Если заполнять надо шумом именно из палитры изображения, то без JS - никак.

[Антон Спирин]

У вас ваш слайдер итак на JS. Добавить при инициализации дополнительную операцию, а именно, добавление подложки под изображение с backgorund: url('ваше изображение'); background-size: cover; и все. А blur на css filters.

[Igor A]

Антон Спирин, согласен с вами, но интереснее было бы использовать эффекты с палитрой, пусть даже не от фото а произвольное

[Igor A]

kulaeff, в таком случае не подскажите, есть ли какие то эффекты на CSS если допустим прописать статично цвет для реализации данной функции?

[tyzberd]

тут https://jmperezperez.com/medium-image-progressive-... есть что почитать, но без js наверно не обойтись