Dreamweaver制作网页 鼠标经过图像出现文字 还是背景半透明的,怎么做? 5
2个回答
2017-01-05 · 武汉肥猫科技提供高端网站建设、SEO等服务
关注
展开全部
首先设置一个div对象,用CSS样式设置img为背景图片,同时设置隐藏a标签,然后在锚文本写下显示的文字,设置背景样式为半透明filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;},最后设置鼠标经过图片的时候才会显示文字内容。
所写代码为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标放图片上时出现文字</title>
<style>
.fm{ position:relative;width:150px; height:150px;margin:0 auto} /*设置div的相对定位,宽高居中*/
.fm span,a{display:none;text-decoration:none;}/*隐藏文字,去掉下划线样式*/
.fm:hover a.mm{ position:absolute; top:0; width:100%; height:100%;
z-index:100; left:0; display:block;}/*设置绝对定位*/
.fm:hover span{ display:block;position:absolute; bottom:0; left:0;color:#CCCCCC;width:150px;z-index:10;height:25px; line-height:25px; background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}
/* 设置显示文字定位位置,标签宽度与对象宽度相同,设置一定高度,设置css背景为半透明背景颜色。 */
</style>
</head>
<body>
<div class="fm" style="background:url(123/2.png)">
<span>我是一只开心的肥猫</span>
<a href="#" class="mm"> </a>
</div>
</div>
</body>
</html>
浏览效果图为:
以上就是用Dreamweaver制作出鼠标经过图像出现文,背景半透明的效果。
博思aippt
2024-07-20 广告
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具,它提供了4种AI制作PPT的方式,包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT,一站式集成多种AI生成PPT的方式,可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询