Наложение gradient на img

День добрый.

Подскажите как решить такую задачу.

Есть разметка

   <div class="img">
      <img src="img/img1.png" alt="">
  </div>

Картинка (100х100) размещается по центру блока (200х200). Блок имеет белый фон.

как сделать градиент картинки (наложение на изображение), чтобы изображение картинки не было видно, а виден был только градиент, не выходящий за контуры изображения.

Цвет градиента может быть любой, не только белый?

Каждый раз, когда читаю это удивляюсь псевдоселекторы (типа :after не работают не работает с тегом img)

Если размеры известны, задача сводится к расположению псевдоэлемента по размерам изображения. http://jsfiddle.net/1rsbh9ta/

Если размеры будут плавать я бы оборачивал изображение в div. Тогда задача становится тривиальной.

ок. у меня это в таком виде и получалось. а мне надо, чтобы на изображения кота налаживался градиент. т.е как бы кот, но его цвет - это цвет градиента.

Не могу понять из описания как должен выглядеть результат? Можешь показать в виде изображения что имеешь в виду?

вот так. в макете - эти икноки - черные. (изначально думал, что шрифтовые - но нет. )

Вот сслыка на то, что получается сейчас http://jsfiddle.net/gorbuz9kin/nhrp6gpc/1/

Такие штуки делаются наложением PNG-шки поверх узла с градиентным фоном. В PNG-шке делаются прозрачными те пиксели, которые отвечают за рисунок. Можно использовать в качестве background градиент. http://jsfiddle.net/df4fLuud/

Понятно, что ничего непонятно. буду разбираться. спасибо за помощь!

а можно ли средствами CSS добиться прозрачности IMG (например через Opacity), чтобы сделать саму картинку прозрачной, и потом добавить нужный gradient background ?

Поиграйся со значением фона, и посмотри как выглядит само изображение звездочки из примера.

Можно некроссбраузерно использовать clipPath http://bennettfeely.com/clippy/ но самое простое - правильно подготовить само изображение изначально.

может тогда вообще из макета просто нарезать уже готовые IMG с нужным градиентом и не париться с CSS.
как по мне конечному пользователю сайта за компом все равно как реализован градиент на IMG - то ли в фотошопе и вставлен картинкой, то ли через “танцы с бубном” через CSS. ))

Если градиент в дальнейшем не планируется менять, то нарежь и не парься :)

Этот градиент идет по всему сайту (на кнопках, бекграунд заголовках). но конкретно по данным IMG он статичен - т.е. нет ховер-эффекта. Поэтому, скорее всего так и поступлю - нарежу с макета и вставлю картинками ))