gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:37:00 27 4
gpt4 key购买 nike

我正在尝试在图像上显示 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>

我没有发现任何类似的情况,在其他网站上也没有,所以欢迎任何建议。

编辑:实际上我设置了 top 和 left CSS 属性,现在可以正常工作了。

最佳答案

你考虑过背景图像吗?

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

关于html - 在透明图像上显示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55657652/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com