用样式控制一张图片上的文字

z-index+filter
只要字的z-index > 图片的z-index就行!透明度可以慢慢调

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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 type="text/css">
.container{
position:relative;
}
.text{
position:absolute; z-index:100; left:10px; top:10px; color:#00FF00;
}
</style>
</head><body>
<div class="container">
     <img src="http://avatar.profile.csdn.net/B/5/5/2_xing527640118.jpg" border="0" />
        <div class="text">测试文字</div>
    </div>
</body>
</html>
<!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 type="text/css">
    #div1{
        position:relative;
    }
    #div2{
position:relative;
left:10px;
top:-20px;
color:#63C;
    }
</style>
</head><body>
    <div id="div1">
        <img src="1.gif" border="0" />
        <div id="div2">插入文字</div>
    </div>
</body>
</html>
用table或者其他的方式可以实现吗？就是不用div哦
完全可以：<!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" />
</head><body>
<img style="z-index:1" src="http://avatar.profile.csdn.net/B/5/5/2_xing527640118.jpg" border="0" />
    <table style="position:absolute;z-index:2;left:5px;top:15px"><tr><td>文字</td></tr></table>
</body>
</html>
用table 也一样，就是换个标签
<!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 type="text/css">
.container{
position:relative;
}
.text{
position:absolute; z-index:100; left:10px; top:10px; color:#00FF00;
}
</style>
</head><body>
<table class="container" border="1">
     <tr><td>
            <img src="http://avatar.profile.csdn.net/B/5/5/2_xing527640118.jpg" border="0" />
            <table class="text" border="0" cellpadding="0" cellspacing="0">
                <tr><td>测试文字</td>
            </table>
       </td></tr>
   </table>
</body>
</html>
只要把文字放到一个容器中.
并且容器的位置为 position:absolute;
z-index 大于图片的值,
当然容器必须是无背景或者是透明的.
然后设置容器坐标就可以了.
这么简单的代码，你们干吗要搞那么复杂，只要设置img的z-index值为-1即可了
<!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 type="text/css">
div{color:#FF0000;}
    img{
        position:absolute; z-index:-1;
    }
</style>
</head><body>
    <div>
        <img src="http://avatar.profile.csdn.net/B/5/5/2_xing527640118.jpg" border="0" />
        测试文字
    </div>
</body>
</html>
不需要再加什么div span table一类的
直接搞定
设置 position:absolute 不设置 left 和 top, 对不同的浏览器,结果不一样的
<!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 type="text/css">
div{color:#FF0000;position:relative;
}
    img{
        position:absolute; z-index:-1;
    }
</style>
</head><body>
    <div>
        <img src="http://avatar.profile.csdn.net/B/5/5/2_xing527640118.jpg" border="0" />
        测试文字
    </div>
</body>
</html>
个人认为用div + js 控制最好