Question

我需要在页脚和图像绘制多边形中添加图像，我尝试使用z-index值，但无法将其放在顶部。

我的代码示例：

body {
	display: flex;
	flex-direction: column;
	height: 100vh;
}


footer {
	position: fixed;
    top: 180px;
	bottom: 0;
	width: 100%;
}

footer img[usemap] {
	height: auto;
	max-width: 100%;
	width: 100%;
}

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:#CECECE;opacity:0.9;stroke:#000000;stroke-width:2;position:absolute;top:0px;left:0px;z-index:500;pointer-events: none'" />
  Sorry, your browser does not support inline SVG.
</svg>    
</div>
<footer class="footer">
    <img src="http://www.wired.com/wp-content/uploads/2014/12/9-credit-1.jpg" alt="" usemap="#Map" name="#Map" id="map" style='z-index: -1'/>
    <map name="Map" id="Map">
    </map>
</footer>

Answer 1

我不确定您在此处尝试实现的目标，但如果您希望多边形显示在图像上方，则必须放置position和{ {1}}标记中的{1}}样式属性。

这有帮助吗？

＆＃13;

z-index

＆＃13;

<svg>

＆＃13;

svg多边形顶部在图像上

1 个答案: