如何让页面部分变灰（失去焦点）？

想要这样的效果：为了突出页面上的计数部分，其他部分变灰（失去焦点）。
其中，计数部分在一个div中，动态计数显示，用settimeout控制，当计数完毕，变灰的部分恢复正常。

一般做法是做一个半透明的div，通过display:none或者block控制，但覆盖都是页面全部。

题主应该是初学者，变灰和失去焦点(blur)是不一样的术语。翻译一下楼上的，设置一个cover层，设置其opacity为0.5（IE下记得设置其filter alpha为50），并将计数div的z-index设置为比cover层的div大，z-index仅在position为/relative/absolute/fixed时有效，所以你可以采用该计数器

#count_down_wrapper{ width:400px; height:300px; position:absolute; left:50%;top:50%;margin-left:-200px; margin-top:-150px;z-index:10000}

可考虑用z-index将计数div置于遮罩div之上。
给个简单例子示意

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
body{
    background-color: black;
}
#count{
    z-index:10;
    background-color: red;
    color:white;
    position:relative; /* 注意，z-index仅在position为/relative/absolute/fixed时有效 */
}
#cover{
    z-index:9;
    display: block;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity: 0.5;
    background-color: white;
}
</style>
</head>
<body>
<div id="count">计数器</div>
<div id="cover"/>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
(function($){
$('html').click(function () {
    $('#cover').toggle();
})
})(jQuery)
</script>
</body>
</html>

【热门文章】