61,126
社区成员
发帖
与我相关
我的任务
分享请问怎样能用css作出文字叠加在图片上的效果？
网页上有一张图片，我想用一个div将一段文字叠加在这个图片上
我发现用alpha的话，连文字也都半透明了，这不行，理想状况是：div不可见，div上的文字可见，请问用css应当如何实现？
我发现用alpha的话，连文字也都半透明了，这不行，理想状况是：div不可见，div上的文字可见，请问用css应当如何实现？
...全文
请发表友善的回复…
发表回复
traceycui 2011-09-13
- 打赏
- 举报
用定位
lshxy320 2011-09-13
- 打赏
- 举报
一楼正解，谢谢一楼！
guitar_men 2007-09-01
- 打赏
- 举报
正理：把图片作为图片
masse 2007-09-01
- 打赏
- 举报
<div style="background:url(b.gif) no-repeat;width:200px;height:200px;">
测试文字
</div>
将上面这段放到html代码里面，再找一个图片叫b.gif和你的html放到一起，就可以看到效果
测试文字
</div>
将上面这段放到html代码里面，再找一个图片叫b.gif和你的html放到一起，就可以看到效果
飘零雾雨 2007-09-01
- 打赏
- 举报
<!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>test</title>
<meta http-equiv="Content-Language" content="gb2312" />
<style type="text/css">
/*假定要被覆盖的图片规格为200*200*/
.dyimg {
width:200px;
height:200px;
}
.dytest {
position:relative;
z-index:2;
margin-top:-200px;
color:#f00;
}
</style>
</head>
<body>
<div><img class="dyimg" src="1.gif" alt="要被覆盖的图片" title="要被覆盖的图片" /></div>
<div class="dytest">覆盖层上的文字</div>
</body>
</html>
"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>test</title>
<meta http-equiv="Content-Language" content="gb2312" />
<style type="text/css">
/*假定要被覆盖的图片规格为200*200*/
.dyimg {
width:200px;
height:200px;
}
.dytest {
position:relative;
z-index:2;
margin-top:-200px;
color:#f00;
}
</style>
</head>
<body>
<div><img class="dyimg" src="1.gif" alt="要被覆盖的图片" title="要被覆盖的图片" /></div>
<div class="dytest">覆盖层上的文字</div>
</body>
</html>
cgisir 2007-08-29
- 打赏
- 举报
<div style="position:relative">
<div style="position:absolute; left:0; top:0; color:#fff; font-weight:bold">图片文字</div>
<img src="http://zi.csdn.net/2007.06/now120x60.gif"></img>
</div>
<div style="position:absolute; left:0; top:0; color:#fff; font-weight:bold">图片文字</div>
<img src="http://zi.csdn.net/2007.06/now120x60.gif"></img>
</div>
ssfwhxy 2007-08-29
- 打赏
- 举报
两种办法：
1.把这张图片做为层的背景background:url(图片路径)
2.用绝对定位来把层定位到图片上，绝对定位语法：position:absolute;top:坐标;right:坐标;bottom:坐标;left:坐标
不知对你有何帮助
1.把这张图片做为层的背景background:url(图片路径)
2.用绝对定位来把层定位到图片上，绝对定位语法：position:absolute;top:坐标;right:坐标;bottom:坐标;left:坐标
不知对你有何帮助
