如何将h1放在图像上[重复]答案

【问题标题】：How to put h1 on the image [duplicate]如何将h1放在图像上[重复]
【发布时间】：2020-09-10 23:33:08
【问题描述】：

如何在 ID 为“reklama”的图像上添加 ID 为“text-reklama”的文本。我试过了，但它不起作用。有什么建议吗？

HTML：

<div id="reklama-div">
    <img class="letna" src="Reklama/Letna.jpeg" width="949" height="632"
    <h1 class="text-reklama">SLEDUJ ŽIVĚ</h1>
</div>

CSS：

#reklama-div{
position:relative;
}
#reklama-div h1{
position:absolute;
}
#reklama-div img{
position:relative;
}

【问题讨论】：

这能回答你的问题吗？ Place text on image

标签： html css

【解决方案1】：

首先，我在您的代码中发现了一件事，即 img 标签未关闭。 :)

关闭img标签后，您需要根据您的设计或决定在h1标签上添加top和left属性。

#reklama-div h1 {
  position: absolute;
  top: some_value;
  left: some_value;
}

【讨论】：

【解决方案2】：

试试下面的代码。

#reklama-div{
position:relative;
height: 200px;
width: 200px;
}
#reklama-div h1{
margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#reklama-div img{
height: 100%;
width: 100%;
}

<div id="reklama-div">
    <img class="letna" src="http://phiz.live/portal/assets/theme/img/c1.png" width="949" height="632">
    <h1 id="text-reklama">SLEDUJ ŽIVE</h1>
</div>

【讨论】：

【解决方案3】：

绝对定位时需要设置位置坐标（上、左、下、右可用）。

#reklama-div {
  position: relative;
}

#reklama-div h1 {
  position: absolute;
  top: 15px;
  left: 15px;
}

#reklama-div img {
  position: relative;
}

<div id="reklama-div">
  <img class="letna" src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg" width="949" height="632" />
  <h1 class="text-reklama">SLEDUJ ŽIVĚ</h1>
</div>

【讨论】：