Question

我无法找到教程，其中显示了如何使用html和css将图像与其相关联。你能帮忙吗？

示例：

http://up.fall.lt/failai/jpg/2ca74ae66611e4e5e018c9278d03b7d1.jpg

Answer 1

尝试这样的事情：

<div class="container">
    <img src=""/> //path to your img.
    <div class="information">blah blah</div>
</div>

的CSS：

.container {
   position:relative;
}

.information {
   position:absolute;
   top:  //position your information
   left: //position your information

   //other styling for your information
}

我们的想法是只使用position:absolute将您的其他信息（文字，其他图片，...）放在图片上方。

另一个选择是使用像photoshop这样的编辑器来修改您的图像以及其他信息。

Answer 2

一种方法是使用包装div作为绝对定位的容器。

我们可以在包装器div中包含img和text元素。

<div class="image">

      <img src="img/example.jpg" alt="" />

      <h2>Text Over Image</h2>

</div>

我们设置了必要的定位属性。

.image { 
   position: relative; 
   width: 100%;  /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

View this code in action

如何用信息叠加图像？

2 个答案: