Question

我如何将文字写入照片？

<a href="/"><img src"photo.png" />TEXT</a>

我与css位置绝对和相对有关吗？我知道它适用于绝对位置和相对位置，但这是另一种方法，最好的方法是什么？如果是位置绝对和相对的唯一方法，位置相对必须是主要照片和位置绝对内容（TEXT）？

Answer 1

你可以这样做

<img src="http://upload.wikimedia.org/wikipedia/commons/5/5a/SMirC-hi.svg" /><div style="position:relative; left:120px;top:-150px">TEXT</div>

for demo

http://jsfiddle.net/5CSej/

Answer 2

尝试这样的事情，但这是绝对的和相对的

<tr>
<div class="image">
  <img alt="" src="http://www.YourDomain.com/img/yourImage.jpg" />
  <div class="text">
    <p>This is some demonstration text</p>
    <p>This is some more wonderful text</p>
  </div>
</div>
</tr>

你的css

.image {
    position:relative;
}
.image .text {
    position:absolute;
    top:10px;
    left:10px;
    width:300px;
}

这会将文字直接放在图像上

Answer 3

好的，这是另一种在图像上添加文本的方法。条件是你必须使用背景图像。这是 Demo 。

div:before{
  content: "";
  position:absolute; 
  background:url('http://lorempixel.com/400/400') no-repeat;
  width:400px; height:400px;
  z-index:-1;
}

<div><h1>Look at ME!</h1></div>

在图像html上写一些东西

3 个答案: