首頁(yè) 猿問如何讓頁(yè)面部分變灰（失去焦點(diǎn)）？

如何讓頁(yè)面部分變灰（失去焦點(diǎn)）？

JavaScript

藍(lán)山帝景 2019-04-09 20:24:36

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

查看完整描述

2 回答

慕標(biāo)5832272

TA貢獻(xiàn)1966條經(jīng)驗(yàn) 獲得超4個(gè)贊

可考慮用z-index將計(jì)數(shù)div置于遮罩div之上。給個(gè)簡(jiǎn)單例子示意testbody{background-color:black;}#count{z-index:10;background-color:red;color:white;position:relative;/*注意，z-index僅在position為/relative/absolute/fixed時(shí)有效*/}#cover{z-index:9;display:block;position:fixed;top:0;left:0;right:0;bottom:0;opacity:0.5;background-color:white;}計(jì)數(shù)器

反對(duì) 回復(fù) 2019-04-09

元芳怎么了

TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超7個(gè)贊

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

反對(duì) 回復(fù) 2019-04-09