我正在寻找不覆盖图像的线性背景;我已经尝试过使用具有白色背景的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>





真的感谢
安德鲁

最佳答案

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>

10-05 20:56
查看更多