z-index+filter
只要字的z-index > 图片的z-index就行!透明度可以慢慢调
只要字的z-index > 图片的z-index就行!透明度可以慢慢调
解决方案 »
- 用js提交表单后文本内容不变化
- 新手问题
- 求教,三级联动菜单代码,选一级菜单后二级和三级菜单没反应
- 问一个关于用firebug或者其他方法查找动作响应函数的问题~~~~
- 谁那里有比较全的 并且是在输入框后面弹出错误的表单验证代码?
- 自动生成控件,帮定事件,回车的时候第一次好用,第二次就不好使
- 怎样让javascript显示出的时间选择菜单显示在网页的最前?
- 怎样判断一个变量在页面上是否已经定义了啊?谢谢
- 求与以下功能一样的javascript函数!要求有同样的返回值!!!!!!!!!!!!!!!!!!!!!!!!!!
- window.open('openwin.htm','newwin','fullscreen=yes,scrollbars=no');为什么滚动条还有?
- 看不太懂这个JS,谢谢了
- 如何输出数字为01234这样0开头的数字?
<!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>
<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>
<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>
<!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 大于图片的值,
当然容器必须是无背景或者是透明的.
然后设置容器坐标就可以了.
<!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>
直接搞定
<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>