Линейный градиент в сочетании с фоном изображения не отображается

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 (), вам следует использовать RGBA (), который позволяет вам добавить прозрачность к вашему градиенту, когда вы используете RGB () для вашего градиента, вы получите solid градиент, поэтому градиент покроет изображение, которое вы пытаетесь ввести!

* Примечание: 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;

}

Вы можете посмотреть по этому адресу.Вы бы попробовали это?