效果預覽:
http:///keleyi/phtml/divcss/24.htmHTML文件代碼:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS給圖片加上播放按鈕 - </title>
<style>
.keleyiImgBox img {
display: block;
}
.keleyiImgBox li {
position: relative;
list-style-type: none;
border: 1px solid #ccc;
padding: 3px;
float: left;
}
.keleyitoolbar {
position: absolute;
bottom: 15px;
right: 15px;
}
</style>
</head>
<body>
<div>
<ul id="imgBox" class="keleyiImgBox">
<li><a href="http:///" target="_blank"><img src="http:///keleyi/phtml/divcss/24/hovertreegirl.jpg" width="200" height="150" border="0" /></a><div class="keleyitoolbar"><a href="http://tool./" target="_blank" title="播放"><img src="http:///keleyi/phtml/divcss/24/hovertreeplay.png" border="0"></a></div></li>
</ul>
<div style="clear:both"><a href="http://" target="_blank"></a> <a href="http://hovertree.com/texiao/">特效庫</a> <a href="http:///a/bjae/ygwcbhl2.htm">原文</a> <a href="http://hovertree.com">HoverTree</a> </div>
</div>
</body>
</html>