Html 在透明图像上显示内容

我试图在一个图像上显示html元素（表单、文本等），该图像已通过gimp变得透明。但不管我怎么做，内容都被图像隐藏了

我更改了页面的背景色，只是为了确保浏览器不会因为某种原因将透明部分更改为白色，而事实并非如此

我也尝试过使用z-index属性，但没有成功

在重新加载页面时，我可以看到文本正确显示，但随后图像会显示并覆盖它

#foo{
位置：相对位置；
}
#福伊姆{
宽度：20%；
身高：20%；
}
#酒吧{
位置：绝对位置；
}

---

您考虑过背景图像吗

#bar {
  background-image: url('/path/to/myimg.jpg');
  background-size: contain;
  background-position: center center;
}

---

id='bar'div的id属性未正确终止。这段代码在修复后似乎可以正常工作。我很确定这是一个输入错误，代码中没有，我回家后会检查一下。谢谢您刚刚检查过，它写得很正确如果您使用

#foo

作为选择器会怎么样？