Фотошоп в руки и вперёд
Создаём обычное изображение с белым фоном, по центру этого изображение пихаем наше изображение (на новый слой), задаём ему прозрачность (примерно 50%), затем, кликаем по нашему изображению правой кнопкой мыши > загрузить выделенную область. Теперь область нашего изображения выделена, переходим на слой "белого фона", нажимаем delete и выделенная область удаляет кусок белого фона по середине
Объединяем слои, сохраняем изображение в *png.
А дальше уже всё дело ловкости рук
<img alt="" id="test" src="image.png" />
<input onclick="imgColor('red')" type="button" value="Красный" />
<input onclick="imgColor('green')" type="button" value="Зелёный" />
<input onclick="imgColor('blue')" type="button" value="Голубой" />
function imgColor(color) {
imgColor.elem.backgroundColor = color;
}
imgColor.elem = document.getElementById('test').style;
Таким образом, у нас есть белое изображение, с полупрозрачной дыркой по середине, сама дырка - нужная нам полупрозрачная "текстура". Через стили меняем цвет фона изображения и этот фон будет слегка виден через полупрозрачную текстуру и даст такой же эффект, как показан на Вашем скриншоте.