如何用信息叠加图像？

Question

我找不到说明如何使用 html 和 css 制作带有信息的图像的教程。你能帮忙吗？

示例：

_{（来源：fall.lt）}

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 作为绝对定位的容器。

我们可以将 img 和文本元素都包装在包装器中 div。

<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

如何用信息叠加图像？

How to overlay image with information?

html

css

jquery

image