您的位置：首页 > Web前端 > HTML

HTML-扫雷1--隐藏小格的背景色

2015-08-28 11:29 375 查看

将大DIV设背景图片，小DIV设背景颜色并设置触发的事件（当点击小DIV时它的背景颜色变为透明）

<head>
<title>无标题文档</title>
<style type="text/css">
*
{
margin:0px auto;
padding:0px;
}
#a1 div
{
width:100px;
height:100px;
background-color:#09F;
border:1px solid black;
float:left;
}
#a1
{
width:410px;
height:410px;
background-image:url(../../../Pictures/1437459768106.jpg);
}
</style>
</head>

<body>
<div id="a1">
<div id="aa1" onclick="pic(this)"></div>
<div id="aa2" onclick="pic(this)"></div>
<div id="aa3" onclick="pic(this)"></div>
<div id="aa4" onclick="pic(this)"></div>
<div id="bb1" onclick="pic(this)"></div>
<div id="bb2" onclick="pic(this)"></div>
<div id="bb3" onclick="pic(this)"></div>
<div id="bb4" onclick="pic(this)"></div>
<div id="cc1" onclick="pic(this)"></div>
<div id="cc2" onclick="pic(this)"></div>
<div id="cc3" onclick="pic(this)"></div>
<div id="cc4" onclick="pic(this)"></div>
<div id="dd1" onclick="pic(this)"></div>
<div id="dd2" onclick="pic(this)"></div>
<div id="dd3" onclick="pic(this)"></div>
<div id="dd4" onclick="pic(this)"></div>
</div>
</body>
<script type="text/javascript">
function pic(a)
{
a.style.opacity="0";
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航