Question

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

我在stackoverflow中使用了所有解决方案，但没有任何效果。

这是我的代码：

.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（），而当您使用RGB（）进行渐变时，应该使用的是RGBA（），它可以为渐变添加透明度，您会得到一个实心渐变，因此渐变将覆盖您要输入的图像！

*注意：如果您希望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;

}

您可以查看此地址。你会尝试吗？

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

2 个答案: