Положение градиента фона

Question

У меня есть «правильный» градиент, который я пытаюсь расположить так, чтобы он остановил 20px со дна моего div. Значит, градиент течет слева направо, а нижние 20 пикселей моего div я бы хотел, чтобы он был белым.

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

Если вы посмотрите на изображение, вы увидите, что я пытаюсь сделать здесь. Любая помощь будет принята с благодарностью.

height: 200px; 


background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader1.jpg"), -webkit-linear-gradient(left,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px; 
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader1.jpg"), -o-linear-gradient(right,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px; 
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader1.jpg"), -moz-linear-gradient(right,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px; 
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader.png"), linear-gradient(to right,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px; 
background-size: contain; 
background-repeat: no-repeat; 
background-position: center; 

Answer 1

Вот как это будет работать, но ни изображение или градиент есть любой прозрачности, поэтому в примере они будут охватывать друг друга в каждом заказе, в котором вы их размещаете:

http://codepen.io/anon/pen/OPKKMO?editors=010

div { 
height: 200px; 
background: -webkit-linear-gradient(to right,#24a2b5,#24a2b5,#24a2b5,white,white,white) top left/100% calc(100% - 20px), url(http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader.png) top left/100% 100%; 
background: linear-gradient(to right,#24a2b5,#24a2b5,#24a2b5,white,white,white) top left/100% calc(100% - 20px), url(http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader.png) top left/100% 100%; 
background-repeat: no-repeat; 

}

Я отменил размещение здесь в противном случае градиент не будет видно. Просто сосредоточился на его высоте, поэтому другие измерения могут быть отключены от того, что будет предназначено.

Answer 2

Просто добавьте DIV вокруг этого, и установить CSS для

padding-bottom:20px; 

Так у вас есть

<div class="paddingBTM"><div class="gradient"></div></div>