1个回答
展开全部
这两天研究了一下，基本上明白这个效果的实现原理了。以下为实现代码，在火狐下能够通过。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<style type="text/css">
body {background-image:url(http://www.jhsyh.com/line/img/20101210131221154.jpg)}
#bk {background-color:gray;opacity:0; width:144px;height:144px; float:left;}
#icon {position:relative; left:-136px;top:8px}
</style>
<body>
<div id="bk"></div>
<img src="http://d.lanrentuku.com/down/png/1202/red_hearts/red_hearts_09.png" id="icon">
</img>
</body>
<script type="text/javascript">
var bk=document.getElementById("bk");
var icon=document.getElementById("icon");
icon.onmouseover=function(){
bk.style.opacity=0.5;
}
icon.onmouseout=function(){
bk.style.opacity=0;
}
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<style type="text/css">
body {background-image:url(http://www.jhsyh.com/line/img/20101210131221154.jpg)}
#bk {background-color:gray;opacity:0; width:144px;height:144px; float:left;}
#icon {position:relative; left:-136px;top:8px}
</style>
<body>
<div id="bk"></div>
<img src="http://d.lanrentuku.com/down/png/1202/red_hearts/red_hearts_09.png" id="icon">
</img>
</body>
<script type="text/javascript">
var bk=document.getElementById("bk");
var icon=document.getElementById("icon");
icon.onmouseover=function(){
bk.style.opacity=0.5;
}
icon.onmouseout=function(){
bk.style.opacity=0;
}
</script>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
logo在线生成器
2024-10-23 广告
燕雀零一，专业logo生成器是一家科技型的设计公司，团队深耕企业品牌设计服务已有十余年，已助力多家企业塑造其品牌形象及体验，服务内容含：LOGO设计/VI设计/产品包装设计/导视店面门头及空间设计，吉祥物设计/海报设计等。 我们的目标是帮助...
点击进入详情页
本回答由logo在线生成器提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
