如何使用CSS给图片加上说明

html-css08

如何使用CSS给图片加上说明,第1张

<img src= height= width= alt=图片说明 title=图片说明</img

鼠标悬停在图片上的时候会有提示。

如果你要在图片上加文字的话，有两个方案，

一个是把图片设为某单元格的背景图片，然后单元格里加上文字就好了；

另一个是创建一个<div层，使用style=position:absolutelytop:pxleft:px绝对定位到图片所在位置，然后在层里添加文字即可。

可以实现,给你个简单的办法:

代码copy后保存成*.html

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>简单鼠标事件提示效果</title>

<style>

body { margin:0}

img { border:0}

.imgbox { width:80pxheight:automargin:100px autobackground-color:#ccccursor:pointer}

.outbox { position:absolutewidth:100pxheight:50pxfont-size:12pxborder:#ccc solid 1pxmargin-top:-70pxmargin-left:50pxbackground-color:#f1f1f1display:none}

</style>

</head>

<body>

<div class="imgbox" onmouseover="document.getElementById('on').style.display='block'" onmouseout="document.getElementById('on').style.display='none'">

<img src="http://www.wowshili.com/bbs/customavatars/3.jpg" />

<div id="on" class="outbox">你的提示加这里面</div>

</div>

</body>

</html>