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

Question

想要这样的效果：为了突出页面上的计数部分，其他部分变灰（失去焦点）。
其中，计数部分在一个div中，动态计数显示，用settimeout控制，当计数完毕，变灰的部分恢复正常。
一般做法是做一个半透明的div，通过display:none或者block控制，但覆盖都是页面全部。

Answer 1

可考虑用z-index将计数div置于遮罩div之上。给个简单例子示意testbody{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;}计数器(function($){$('html').click(function(){$('#cover').toggle();})})(jQuery)

Answer 2

题主应该是初学者，变灰和失去焦点(blur)是不一样的术语。翻译一下楼上的，设置一个cover层，设置其opacity为0.5（IE下记得设置其filteralpha为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}