CSS не видно градиент на картинке

Question

Всем привет, первый раз делаю градиент в CSS и не особо получается. Если кто знает как решить проблему помогите пожалуйста) (браузер хром)

.special-article {   
background: linear-gradient(90deg, rgba(48, 64, 89, 0.84) -2.9%, rgba(53, 65, 83, 0) 65.7%);
background-image: url('../image/jpg/255.jpg');
}

вот что должно получится

Answer 1

Если вам не принципиально вставлять картинку через css, то вот как вариант(наверное, не самый лучший, но всё же).

.special-article img {
  position: relative;
}

.gradient {
  position: absolute;
  background: linear-gradient(90deg, rgba(48, 64, 89, 0.84) -2.9%, rgba(53, 65, 83, 0) 65.7%);
  width: 700px;
  height: 350px;
  top: 10px;
}

<div class="special-article">
  <img src="//i.imgur.com/Wsvz9ML.png" alt="" width="604" height="377">
  <div class="gradient"></div>
</div>

Не знаю, как в код вставить сюда картинку, но вот скрин, как получилось у меня

Answer 2

Если я правильно понял, есть такая реализация:

.content {
    display: inline-block;
    position: relative;    
    line-height: 0;
}
.content:after {
    content: "";
    display: block;    
    width: 100%;
    height: 100%;    
    position: absolute;
    top: 0;      
    left: 0;   
    background: transparent;
    background-image: linear-gradient(to left, red, yellow);
    opacity: 0.4;
}

<div class="content">
      <img src="https://m.spletnik.ru/img/2022/03/polly/20220328-kot-post.jpg" alt="">
 </div>
<!-- Оригинальная картинка -->
<img src="https://m.spletnik.ru/img/2022/03/polly/20220328-kot-post.jpg" alt="">

Answer 3

Градиент в CSS это по сути изображение, следовательно оно идёт в свойстве background-image, и когда вы пишите background: gradient, а потом background-image: image, то по сути градиент image встанет вместо gradient.

Но если вы ставите картинку через background-image, то можете туда же добавить и градиент, ибо background "поддерживает" слои.

.bg-layouts {
  width: 350px;
  height: 175px;
  border-radius: 10px;
  background-color: #ccc;
  background-image: 
    linear-gradient(90deg, rgba(255,130,53,.75), rgba(48,232,191,0)), /* слой 1 */
    url(//i.imgur.com/brikCeG.png); /* слой 0 */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

<div class="bg-layouts"></div>

БЛОГ НА HUSL

CSS не видно градиент на картинке

Ответы (3 шт):