时间戳

首页 > 解决方案 > 在透明图像上显示内容

html - 在透明图像上显示内容

问题描述

我正在尝试在图像上显示 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 属性，现在它工作正常。

标签： htmlcss

解决方案

您是否考虑过背景图像？

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

推荐阅读