先上效果图(本人喜欢胡巴，背景用了胡巴)，鼠标滑过页面，图片变暗，透明度为0.4，同时弹出登录窗口。
接下来先看css代码(写的可能不是很规范，根据调整样式顺序写的)
body{background-color: black;width: 100%;height: auto;overflow: hidden;}
img{width: 1550px;height: auto;}
.logIn{width:340px;height:280px;background-color: white;border-radius: 10px;border: 1px solid grey;}
.login-title{margin: 0 auto;width: 100%;height:45px;background-color: #80236b; }
h3{line-height: 45px;text-align: center;}
.login-content{margin:30px 0 0 0;}
.login-content div{width:200px;margin:0 auto;padding-bottom:25px;}
.affix{top:200px;right: 200px;}
label{width: 100%;line-height: 40px;}
.button{margin: -10px 0 0 80px;width:180px;}
input.log{width:180px;margin: 0 auto;color: white;background-color: #80236b;border-radius: 15px;height: 40px;font: 16px "microsoft yahei";}
p.remember-name{font: 14px "microsoft yahei";color: dimgrey;}
input{border-radius: 5px;font: 14px "microsoft yahei";}
/*placeholder样式*/
::-webkit-input-placeholder {font: 14px "microsoft yahei";color:grey;padding-left: 10px;line-height: 22px;}
::-moz-placeholder { font: 14px "microsoft yahei";color:grey;padding-left: 10px;line-height: 22px;} /* firefox 19+ */
:-ms-input-placeholder {font: 14px "microsoft yahei";color:grey;padding-left:10px;line-height: 22px;} /* ie */
input:-moz-placeholder {font: 14px "microsoft yahei";color:grey;padding-left:10px;line-height: 22px;}
.glyphicon{color:#80236b; }
html代码（代码简单）
<body>
<img src="dist/images/link.jpg" alt="遮罩图片" style="z-index: -1"/>
<div class="logIn affix" style="display: none;z-index:1000">
<div class="login-title">
<h3>用户登录</h3>
</div>
<div class="login-content">
<div class="user">
<label class="user glyphicon glyphicon-user"></label>
<input type="text" placeholder="员工账号" />
</div>
<div class="pass">
<lable class="password glyphicon glyphicon-lock"> </lable>
<input type="password" placeholder="密码" />
</div>
</div>
<div class="button">
<p class="remember-name"> <input class="remember-name" type="radio" value="记住账号和密码" name="remember"/>记住账号和密码</p>
<input class="log" type="button" value="登录"/>
</div>
</div>
</body>
jquery代码
//遮罩窗体弹出登录框
$(function(){
$('body').hover( function(event){
$('img').fadeTo(1000,0.4);//1000为速度，0.4为透明度
$('.logIn').show(1000);
});
});
本人做这个练习就是想联系一下自己写jquery代码，有问题之处还请多多指正！