图片上的文字HTML CSS

Question

图片上的文字HTML CSS

3

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

- user2988642

3个回答

0

使用 z-index：

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

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

- digitai

0

使用图像作为背景，并在其上添加文本。

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

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

- khan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- j08691 · Accepted Answer

您需要在标题div中添加position:relative，并对图像添加一个top值。

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

jsFiddle示例

另一种选择是将图像设置为div的背景图像，完全不需要定位。

jsFiddle示例

(请注意，在您的示例中，您有一个h3元素，但在您的CSS中，您正在针对h2元素进行定位。)