Html 不透明图像上带有透明背景的图像

我想在一个立体图像上叠加一个线条图像（没有背景，只有线条），这样线条就可以叠加在另一个不透明的图像上。我试过用PNG和GIF两种格式的叠加，但它一直显示为实体，完全覆盖了第二幅图像。我甚至试过玩z-index也没用。这不可能吗？如果是，你知道我做错了什么吗

.Overlay{
位置：相对位置；
显示：块；
}
.固体{
位置：绝对位置；
排名：0；
左：0；
}

---

您可以做的是删除实体img（在html中），并在css中添加以下内容：

.Overlay {
   position: relative;
   display: block;
   background-image: url("solid.jpg");
}

---

如果仍不起作用，请再次添加实心img，然后添加背景色：透明

我会将图像放置在

中，并将

.solid

图像定位为相对于该

的绝对图像，并按如下方式播放z索引：

div{position:relative}
.覆盖{
位置：相对位置；
显示：块；
z索引：0
}
.固体{
位置：绝对位置；
排名：0；
左：0；
z指数：-1
}

---

最好在图像后面加上覆盖层，这样它会自动具有更高的z索引并显示在顶部

其次应用

位置：绝对到覆盖层也将是最有意义的

应用这些建议可以让您了解您的目标：


.Solid{
位置：相对位置；
显示：块；
}
.覆盖{
位置：绝对位置；
排名：0；
左：0；
}
我会将两个图像包装在一个容器中，以允许它们通过
位置：相对，在屏幕上获得相同的坐标参考。从那里，您可以将两个图像居中或移动到流中的另一个位置，并使它们堆叠在彼此的顶部


.Overlay{
位置：相对位置；
显示：块；
宽度：最大含量；
保证金：自动；
}
img{
位置：相对位置；
对象匹配：按比例缩小；
z指数：1；
}
.固体{
位置：绝对位置；
排名：0；
左：0；
z索引：0
}