Question

我正在尝试在图像上显示html元素（表单，文本等），该图像已通过gimp变得透明。但是无论我尝试了什么，内容都会被图像隐藏。

我已经更改了页面的背景颜色，只是为了确保浏览器出于某种原因没有将透明部分更改为白色，并且没有这样做。

我也尝试过使用z-index属性，但这没用。

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

#foo{
  position: relative;
}

#foo img{
  width: 20%;
  height: 20%;
}

#bar{
  position: absolute;
}

<!DOCTYPE html>
<body>
<div id='foo'>
   <img src='my_img' />
   <div id='bar'>
   <!--This is where I want to write what will be displayed on the transparent image.-->
    </div>
</div>
</body>

我没有发现任何类似的情况，也没有在其他网站上找到过这种情况，因此欢迎任何建议。

编辑：实际上，我设置了顶部和左侧的CSS属性，并且现在可以正常工作了。

Answer 1

您考虑过背景图片吗？

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

在透明图像上显示内容

1 个答案: