html - 背景渐变位置

Question

我有一个“正确的”渐变，我正在尝试定位它，以便它在距离我的 div 底部 20px 处停止。意思是，渐变从左向右流动，但我的 div 的底部 20 个像素我希望它是白色的。

我已经尝试了下面的定位代码，它在没有图像的情况下也能正常工作，但我无法让它与图像一起工作。

如果您查看图像，您可以看到我在这里尝试做的事情。任何帮助将不胜感激。

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;

我已经颠倒了这里的位置，否则渐变将完全不可见。只关注它的高度，因此其他尺寸可能会偏离预期。