作为一个可靠的方法，你可以只做一个背景图像是500x5像素，在你的css使用:

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

其中xxxxxx对应与最终渐变颜色相匹配的颜色。

你也可以把它固定在屏幕的底部，让它与初始渐变颜色相匹配。

我的解决方案:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

我总是使用以下代码使其工作。这里有一些注意事项:

如果你把图片URL放在渐变前面，这张图片将会显示在渐变上面。

.background-gradient { 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat， -moz-linear-gradient(135deg， #6ec575 0， #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat， -webkit-gradient(135deg， #6ec575 0， #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat， -webkit-linear-gradient(135deg， #6ec575 0， #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat， -o-linear-gradient(135deg， #6ec575 0， #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat， -ms-linear-gradient(135deg， #6ec575 0， #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png')无重复，线性梯度(135deg， #6ec575 0， #3b8686 100%); 身高:500 px; 宽度:500 px; ｝ < div class = " background-gradient " > < / div >

如果你把渐变放在图片URL之前，这张图片会显示在渐变下面。

.background-gradient { 背景:-moz-linear-gradient(135deg， #6ec575 0， #3b8686 100%)， url('http://trungk18.github.io/img/trungk18.png') no-repeat; Background: -webkit-gradient(135deg， #6ec575 0， #3b8686 100%)， url('http://trungk18.github.io/img/trungk18.png') no-repeat; 背景:-webkit-linear-gradient(135deg， #6ec575 0， #3b8686 100%)， url('http://trungk18.github.io/img/trungk18.png') no-repeat; 背景:-o-linear-gradient(135deg， #6ec575 0， #3b8686 100%)， url('http://trungk18.github.io/img/trungk18.png') no-repeat; 背景:-ms-linear-gradient(135deg， #6ec575 0， #3b8686 100%)， url('http://trungk18.github.io/img/trungk18.png') no-repeat; 背景:线性梯度(135deg， #6ec575 0， #3b8686 100%)， url('http://trungk18.github.io/img/trungk18.png') no-repeat; 宽度:500 px; 身高:500 px; ｝ < div class = " background-gradient " > < / div >

这种技术就像我们在这里描述的有多个背景图像一样

这是一个渐变叠加的背景图片，26%是不透明度，7度是渐变位置

CSS梯度生成器

backgroundImage: `linear-gradient(7deg, rgba(2,0,36,1) 0%, rgba(39,17,68,1) 26%, rgba(10,19,20,0.49343487394957986) 100%), url('backgroundImg.jpeg')`,

如果你想要一个在中心只有一个背景图像的渐变，你可以用一行代码做到，像这样:

body {
  background:  url(logo.png) no-repeat fixed center center, linear-gradient(#00467f, #a5cc82) fixed;
}

下面是我创建的一个MIXIN，用来处理人们可能喜欢使用的所有东西:

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

可以这样使用:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

希望这对你们有帮助。

这要归功于@Gidgidonihah找到了最初的解决方案。