首先设置一个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制作出鼠标经过图像出现文，背景半透明的效果。
温馨提示：内容为网友见解，仅供参考
第1个回答 2016-06-11
利用相对和绝对定位布局，背景半透明用background：rgba(0,0,0,0.5)，括号前面三个数字代表颜色的RGB值，后面的0.5代表透明度（0-1）
先给半透明背景所属的div设置不显示，然后利用js当鼠标经过图像时半透明背景和文字所属div显示，大概思路就是这样本回答被网友采纳
先给半透明背景所属的div设置不显示，然后利用js当鼠标经过图像时半透明背景和文字所属div显示，大概思路就是这样本回答被网友采纳
相似回答
