Как сделать плавный переход картинки фона в сплошной цвет?

Question

[69from]

Как сделать плавный переход картинки фона сайта (body) в сплошной цвет? Чтобы в шапке была картинка, а дальше она просто уходила в сплошной фон и в подвале уже был просто залитый фон? Нужно самое простое решение!

Answer 1

[Bastax13]

С помощью градиента.
Например, этот код зальет картинку снизу белым и этот белый будет плавно растворяться ближе к верху.

background: linear-gradient(transparent 80px, white);

Answer 2

[Ankhena]

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.
Умнее и проще этот цветовой переход нарисовать в фотошопе

Answer 3

[Владислав Старцев]

использовать градиент, а картинку поставить через :before пример:

div{
 background: linear-gradient(#000 ?px, #fff);
 position: relative;
}

div:before{
 content: '';
 background: url(kartinka.png) no-repeat;
 background-size: 100%;
 background-position: 0 0;
 position: absolute;
}

Comments

[Ankhena]

Только надо писать множественный фон. Как у вас, градиента видно не будет, его перетрет background-image

[Владислав Старцев]

Ankhena W: изменил ответ

[Ankhena]

Владислав Старцев: под "множественным фоном" я имела в виду фон через запятую.