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

最新推荐文章于 2024-07-27 12:47:16 发布

weixin_30721899

最新推荐文章于 2024-07-27 12:47:16 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jia520110270/p/4766014.html

版权

将大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>