Blog > 互联网产品设计 > 用CSS给图片打标

用CSS给图片打标

如图:
uploads/200707/17_230528_327785016_9c2b7980a9_o.jpg

效果演示:http://5key.net/demo/12_20/

制作方法:
1、准备gif图片
uploads/200707/17_230552_327785017_4cebd3a681_o.gif

2、代码部分

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>图片打标</title>
<style>
body{padding:0px; margin:20px;}
.pic{background:#000; padding:5px; border:1px solid #4F4F4F; float:left;}
.pic span{width:95px; height:95px; background:url(gif.gif); position:absolute; margin:-6px 0 0 -6px;}
</style>
</head>

<body>
<div class=”pic”>
    <span></span>
    <img src=”1.jpg” mce_src=”1.jpg” />
</div>
</body>
</html>