https://jsfiddle.net/wx8a92dc/
Объяснение:
1. Фон картинка располагается в середине блока (по горизонтали).
2. На нее вторым фоном накладывается градиент.
3. calc(50% - 160px) считаем: середина минус половина ширины картинки. Т.е. до (слева направо) этой точки может идти либо чистый цвет либо другой непрозрачный градиент.
4. calc(50% - 30px) - точка до которой "размазываем" градиент. Выбирается по желанию и исходя из особенностей картинки и цвета в который делаем переход. Теоретически можно поставить сколько угодно еще точек изменения цвета и/или интенсивности градиента.
div {
background: linear-gradient(to right, #eee 0%, #eef calc(50% - 160px), transparent calc(50% - 30px), transparent calc(50% + 30px), #eef calc(50% + 160px), #eee 100%),
url(http://www.artleo.com/mini/201211/36124.jpg) no-repeat top center;
height: 200px;
width: 100%;
}
P.S.
Умнее и проще этот цветовой переход нарисовать в фотошопе
