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