线性渐变与图像背景相结合不显示

Question

我有一个部分，我添加了线性渐变作为背景加图像，不幸的是，只有线性渐变显示没有显示图像。

我已经在堆栈溢出中使用了所有解决方案，但没有任何效果。

这是我的代码：

.newslater {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient( 51deg, rgb(203, 0, 53) 0%, rgb(224, 105, 0) 100%), url("https://thumb.ibb.co/ekYLtp/Content_bottom.png") no-repeat fixed;
background-size: cover;
width: 100%;
height: 489px;
}

<section class="newslater">
</section>

这是jsfiddle：http://jsfiddle.net/n7dofak9/1/

我正在努力解决这个问题:(，我在代码中做错了什么？ 请帮忙

Answer 1

解决方案很简单，你的错误是你使用的是 RGB((，你应该使用的是 RGBA((，它允许你为渐变添加透明度，当你使用 RGB(( 作为渐变时，你会得到一个实心渐变，因此渐变将覆盖你尝试输入的图像！

*注意：RGBA(x，x，x，y(y值(代表透明度(只能接受小数点0-1的值，1表示实心，0表示完全透明，如果您希望渐变更亮，请走低，如果您希望渐变更暗，请走高。

如果您有任何问题，请告诉我！

请给我投赞成票！

更正的代码：

.newslater {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient( 51deg, rgb(203,0,53, 0.5) 0%, rgb(224,105,0, 0.5) 
100%), url("https://thumb.ibb.co/ekYLtp/Content_bottom.png");
background-size: cover;
width: 100%;
height: 489px;
}

Answer 2

http://jsfiddle.net/n7dofak9/3/

.newslater {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-image: 
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), url('https://image.shutterstock.com/image-vector/colorful-circles-walpaper-3d-seamless-260nw-306246791.jpg');
background-size: cover;
width: 100%;
height: 489px;

}

你可以看看这个地址。 你会试试吗？