html - 如何隐藏图像上的线性背景？

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 将 :after 伪元素定位在图像的前面。

要么删除 z-index，要么给图像一个更高的 z-index。

移除了 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-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%;
    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>