DIV 设置背景图片

在制作网页时，常常需要在图片上显示文字，习惯的做法是直接编辑图片在上面增加文字内容。
利用CSS可以更简便更完美地达到相同效果。

1.把图片做为背景放入层：

div#bkgdimg {
background-image: url(/images/backgroundimage.JPG);
background-repeat: no-repeat;
height: 380px;
width: 380px;
}

2.把叠加文字放入另外的层：

div#sutext {
position: relative;
height: auto;
width: auto;
left: 25px;
top: 200px;
}

3.显示图片上叠加文字的效果：

<div><div>Superimposed Text</div></div>

主要优势：

• 减小了图片的大小，提高了装载速度。因为不需要在图片上增加任何内容。
• 可以用最好的效果 显示文字。不会像图片那样，由于屏幕分辨率的不同而影响显示效果。
• 方便了对文字内容的修改。不需要专门的图片 编辑工具和技术。
• 可以更灵活地控制图片和文字的位置。因为
  标签远比< img>标签更容易控制位置。
• 文字更容易接近。因为文字能够更好地被浏览器和搜索引擎查询和处理。