background-image + градиент

[jonson92]

Хочу сделать на фон картинку.
В общем идея такая:
Поставить картинку на фон, которая снизу начинает становиться прозрачной и переходить в черный цвет. Т.е. если сайт получается "длинный"(картинка же не перекроет его весь), то сверху находится изображение, которое к концу начинает перетекать в однотонный чёрный фон, который тянется и тянется до конца.

body{
    background-image:url("wowback_2.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    background-color:black;
    
}

Картинку вроде вставит, и фон сделал чёрным. Переход получился резкий. Можно ли его "смягчить" градиентом в CSS или тут через фотошоп как то?

[Super_Saimon]

Не видя наглядно, не могу утверждать что мое решение то, что вам нужно. Но попробуйте воспользоваться сайтом http://www.colorzilla.com/gradient-editor/ для создания нужного вам градиента.  

[jonson92]

Super_Saimon, например, сайт https://www.kinopoisk.ru/ .Там на фоне картинка, которая плавно перетекает в сплошной черный фон. Вот такого эффекта я хочу добиться.  За ресурс спасибо

[Димитрий]

В 09.11.2017 в 23:20, jonson92 сказал:

Super_Saimon, например, сайт https://www.kinopoisk.ru/ .Там на фоне картинка, которая плавно перетекает в сплошной черный фон. Вот такого эффекта я хочу добиться.  За ресурс спасибо

эта картина сама такая а фон просто указан темным. танки так делали - если вы об этом... (но картинка большая будет)

[AlexZaw]

можно вот так извратится:

<div class="wrap">
<div class="inner"><img src="https://digitalart.io/storage/artworks/209/Corvo-Attano-Dishonoured-Wallpaper.jpeg" alt=""></div>
</div>

body{background: #000;}

.wrap{color:#fff;position: relative;
}
.inner{position: absolute;
top: 0;left: 0;right: 0;bottom: 0;z-index: -1; 
}
.inner img{max-width: 100%;
-webkit-mask-image: -webkit-gradient(linear,left top, left bottom,
color-stop(0.00, rgba(0,0,0,1)),
color-stop(0.5, rgba(0,0,0,1)),
color-stop(1.00, rgba(0,0,0,0)));
}

песочница

в ie естественно не работает

Edited November 19, 2017 by AlexZaw