使用HTML在图像上书写文字 [英] Writing text on an image with HTML

问题描述

我是HTML的新手，想要显示左侧显示的图片。

我显示的图片是表格行，但我无法取得该文字（ IN 显示在 blog.com 下）。

如何写图片？

任何帮助。

---

EDIT

我尝试了

  .logoBg 
 {
 background -image：url（'images / logo01.gif'）; 
 background-color：＃72c2dd; 
} 
  

和

 < tr class =logoBg> 
< td colspan = 5> IN 
< / td> 
< / tr> 
  

但我只能取得文字和背景颜色，但否背景

b 作为HTML：

 < tr> 
< div class =image> 
< img alt =src =http://www.YourDomain.com/img/yourImage.jpg/> 
< div class =text> 
< p>这是一些演示文字< / p> 
< p>这是一些更精彩的文字< / p> 
< / div> 
< / div> 
< / tr> 
  

然后将其作为您的CSS：

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

这将直接在图片上放置文字。

I'm new to HTML and want to display image shown on left.

I have displayed the image which is a table row but I'm not able to get that text (IN shown below blog.com).

How can I write on the image?

Any help appreciated.

---

EDIT

I tried

.logoBg
{
    background-image: url('images/logo01.gif');
    background-color: #72c2dd;
}

and

<tr class="logoBg">
    <td colspan=5>IN
    </td>
    </tr>

But I'm only getting text and background color, but NO background image.

解决方案

As an example:

You could use this as your HTML:

<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>

then this as your CSS:

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

This will place text directly on an image.

这篇关于使用HTML在图像上书写文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！