在css中修复图像上的文本

Question

我需要在固定位置的图像上显示一个字符串。我的代码如下：

HTML code：

<div>
          <img id='flower' src="http://cs-server.usc.edu:45678/hw/hw3/images/main.jpg" alt="Flower"> </img>
          <div id='title' style='margin-top: -19px;'>
          <h2><span id='yellow_text'>Yellow </span><span id='flower_text'>Flower<span></h2>
          <h3><span id='author_name'>A site by Brian Calhoun</span></h3>
        </div>

Css代码：

#flower{
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

我需要#title标记下的文字始终显示在图片上的特定位置#flower

Answer 1

这是position absolute;的完美用法。

如果你将图像包装在一个div中（为我们的标题创建一个position: relative容器），就像这样：

<div>
     <div class="image_wrapper">
        <img id='flower' src="http://cs-server.usc.edu:45678/hw/hw3/images/main.jpg" alt="Flower"> </img>
        <div id='title'>
            <h2><span id='yellow_text'>Yellow </span><span id='flower_text'>Flower<span></h2>
            <h3><span id='author_name'>A site by Brian Calhoun</span></h3>
        </div>
    </div>
</div>

然后应用这些样式：

.image_wrapper {
    display: inline-block;
    position: relative;
    /* this will center the image in the container */
    margin: 0 auto;
}

#title {
    position: absolute;
    top: 25px; /* adjust as desired */
    left: 15px; /* adjust as desired */
}