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>

Answer 2

在伪元素上使用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>

如何在图像上隐藏线性背景？

2 个答案: