Question

我有一个＆＃34;对＆＃34;渐变，我试图定位它，使其从我的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

只需添加一个div，然后将CSS设置为

padding-bottom:20px;

所以你有

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

Answer 2

这是如何工作的，但图像或渐变都没有任何透明度，因此在示例中，它们将按照您放置它们的顺序相互覆盖：

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;

}

我在这里颠倒了位置，否则根本看不到渐变。只关注它的高度，以便其他尺寸可能偏离预期。

背景渐变位置

2 个答案: