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

Posted 2023-03-05

【中文标题】如何将h1放在图像上[重复]

【英文标题】：How to put h1 on the image [duplicate]

【发布时间】：2020-09-10 23:33:08

【问题描述】：

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

html：

<div id="reklama-div">
    <img class="letna" src="Reklama/Letna.jpeg"  
    <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

【参考方案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"  >
    <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"   />
  <h1 class="text-reklama">SLEDUJ ŽIVĚ</h1>
</div>