Как скрыть линейный фон на изображениях?

Question

Я ищу линейный фон, чтобы не покрывать изображение;Я уже пытался использовать div с белым фоном или не использовать фоновый тег, но, очевидно, не работает.

#heading:before {
    background: linear-gradient(#111111 0%, #123467 65%);
    content: ' ';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

<div id="heading" >
  <img style="position:absolute;left:5%" src="images/gray_circle_logo.png" width="10%"/>
</div>

Действительно, спасибо, Андрей

Answer 1

Используйте z-index: -1; на псевдоэлементе, чтобы переместить его за изображение:

#heading:before {
    background: linear-gradient(#111111 0%, #123467 65%);
    content: ' ';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

<div id="heading" >
  <img style="position:absolute;left:5%" src="https://placehold.it/80x80/fa0" width="10%"/>
</div>

Answer 2

z-index: 1 позиционирует псевдоэлемент :after перед изображением.

Либо удалите z-index, либо увеличьте z-index.

* 1009.* Удален z-index

#heading:before {
    background: linear-gradient(#111111 0%, #123467 65%);
    content: ' ';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100%;
    
}

<div id="heading" >
  <img style="position:absolute;left:5%" src="images/gray_circle_logo.png" width="10%"/>
</div>

Изображение с z-индексом

#heading:before {
    background: linear-gradient(#111111 0%, #123467 65%);
    content: ' ';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

#heading img {
  /* absolute positioning from inline styles */
  z-index: 2;
}

<div id="heading" >
  <img style="position:absolute;left:5%" src="images/gray_circle_logo.png" width="10%"/>
</div>