css - 图片上的文字 html css

<分区>

我正在尝试在 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;
    }

最佳答案

您需要将 position:relative 添加到 titel div 并为图像添加 top 值。

  #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 元素。)

关于css - 图片上的文字 html css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21264249/