图像html css上的文本[重复]答案

【问题标题】：Text over Image html css [duplicate]图像html css上的文本[重复]
【发布时间】：2014-02-11 09:47:58
【问题描述】：

我正在尝试在 HTML 中设置图像并希望文本在其上运行。但是当我使用以下代码时，文本将在图像下运行。

HTML

    <div id="titel">
    <img src="images/titel.jpg" alt="titel">
    <h3>Titel</h3>
    </div>

CSS

    #titel
    {
        float:left;
        width:220px;
        height:100px;
        margin:0px 5px 5px;
    }

    h2
    {
        position:absolute;
    }

【问题讨论】：

标签： css html image text css-position

【解决方案1】：

您需要将position:relative 添加到标题 div 并添加到图像的顶部值。

  #titel {
      float:left;
      width:220px;
      height:100px;
      margin:0px 5px 5px;
      position:relative;
  }
  h3 {
      position:absolute;
      top:0;
  }

jsFiddle example

另一种选择是将图片设置为div的背景图片，完全省去定位。

jsFiddle example

（另请注意，在您的示例中，您有一个 h3 元素，但在您的 CSS 中，您的目标是一个 h2 元素。）

【讨论】：

也可以设置z-index:1 保持文字覆盖图片。
@Danko - 您仍然需要设置顶部位置并在父 div 上设置相对位置。
是的，我的意思是另外可以设置z-index值

【解决方案2】：

使用 z-index：

img
 { position:absolute;
   z-index:-1;
 }

z-index 定义元素的堆栈顺序。

【讨论】：

【解决方案3】：

使用图片作为背景并添加文字。

 <html>
 <head>
 <style>
 body 
 {
 background-image:url('images/titel.jpg');
 }
 </style>
 </head>

 <body>
 <h3>Titel</h3>
 </body>
 </html>

【讨论】：