图片蒙版的实现与应用-CSDN博客

本文链接：https://blog.csdn.net/zpf336/article/details/8134704

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片蒙版</title>
<style type="text/css">
body{
    margin:0;
}

.backClass{
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    background-color:#999933;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

#title{
    position:absolute;
    width:100%;
    text-align:center;
    z-index:0;
}

.popClass{
    position:relative;
    text-align:center;
    top:300px;
    margin:0 auto;
    z-index:2;
    display:block;
}

#back{
    display:none;
}

#pop{
    display:none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#title").click(function(){
    $("#back").attr("class", "backClass");
    $("#pop").attr("class", "popClass");
    $("#back").css("display", "block");
    $("#pop").css("display", "block");
    setTimeout(disappear, 3000);
});

function disappear(){
    $("#back").removeAttr("class");
    $("#pop").removeAttr("class");
    $("#back").css("display", "none");
    $("#pop").css("display", "none");
}

});
</script>
</head>
<body>
    <div id="title">
        <a href="#">蒙版</a>
    </div>
    <div id="back"></div>
    <div id="pop">
        <img src="load.gif" width="30" height="30" />
    </div>
</body>
</html>