首頁猿問如何讓頁面部分變灰（失去焦點）？

如何讓頁面部分變灰（失去焦點）？

JavaScript

縹緲止盈 2019-04-08 11:17:53

想要這樣的效果：為了突出頁面上的計數(shù)部分，其他部分變灰（失去焦點）。其中，計數(shù)部分在一個div中，動態(tài)計數(shù)顯示，用settimeout控制，當計數(shù)完畢，變灰的部分恢復(fù)正常。一般做法是做一個半透明的div，通過display:none或者block控制，但覆蓋都是頁面全部。

查看完整描述

2 回答

絕地無雙

TA貢獻1946條經(jīng)驗獲得超4個贊

可考慮用z-index將計數(shù)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;}計數(shù)器

反對回復(fù) 2019-04-08

弒天下

TA貢獻1818條經(jīng)驗獲得超8個贊

題主應(yīng)該是初學者，變灰和失去焦點(blur)是不一樣的術(shù)語。翻譯一下樓上的，設(shè)置一個cover層，設(shè)置其opacity為0.5（IE下記得設(shè)置其filteralpha為50），并將計數(shù)div的z-index設(shè)置為比cover層的div大，z-index僅在position為/relative/absolute/fixed時有效，所以你可以采用該計數(shù)器#count_down_wrapper{width:400px;height:300px;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-150px;z-index:10000}

反對回復(fù) 2019-04-08