С помощью CSS/JS совместить изображение с однотонным фоном?

Question

[Алексей Помогаев]

Можно конечно каждое изображение обрабатывать в фотошопе/гимпе, делать градиент на нужный цвет фона. Но может с помощью CSS и/или JavaScript можно плавно совместить изображение с однотонным фоном?

Comments

[1010101001000100110100111]

Выдавать изображение в формате PNG у которого альфа-канал плавно меняется в направлении от центра к краю с непрозрачного на полностью прозрачный. Останется лишь подобрать подходящую функцию прозрачности в зависимости от координат изображения (и класса изображения).

Answer 1

[avalak]

Если я вас правильно понял, вам нужен примерно такой эффект.

Навскидку есть три очевидных решения:
— скрипт который будет выдавать готовое изображение. Просто и эффективно.
— js/css box-shadow с inset. Есть ограничения.
— js/svg. Крайне ограниченное применение.

Comments

[Алексей Помогаев]

Кстати, о сервер сайде и не подумал, возможно и правда есть смысл просто делать градиент через imagemagick тот же.

[Сергей Протько]

пощадите сервера. Проще тогда уже наделать старых добрых PNG и облепить ими картинку. А так уродовать графику не в косметических целях — кощунство.

[avalak]

Я не спорю с тем что обработка картинок на сервере не серебряная пуля, но и минусов у этого метода не так много (нагрузка на процессор при большом потоке картинок и удвоение места на диске: оригинал + результат).
Тем не менее в некоторых случаях это может быть подходящим решением.

Во всяком случае есть альтернатива в виде box-shadow inset. Рецепт от Opera. Мне этот вариант ближе чем png обёртка.

Answer 2

[simplecode]

тестаниете: http://www.colorzilla.com/gradient-editor/

Answer 3

[Softlink]

Относительно недавно писал статью. Вариант вполне подойдет и для картинки.
Еще один способ — это затолкать картинку в бэкграунд и также наложить тень с inset.