背景
??前段時(shí)間畫頁(yè)面有一個(gè)小需求厌小，就是點(diǎn)擊「分享」按鈕，頁(yè)面出現(xiàn)一個(gè)半透明的蒙層丁鹉，然后突出顯示一個(gè)圖片妒潭，引導(dǎo)用戶進(jìn)行操作悴能。
分析
??這個(gè)需求很常見，其實(shí)也很簡(jiǎn)單雳灾。但是以前沒想過(guò)如何實(shí)現(xiàn)漠酿，現(xiàn)在突然要做這個(gè)，腦袋里一點(diǎn)思路都沒有』涯叮現(xiàn)在審視一下炒嘲，造成這個(gè)情況的原因有兩個(gè)：一是代碼寫的少了，二是沒有多拓展學(xué)習(xí)并進(jìn)行思考匈庭。為了改變這種情況夫凸，需要在日常中加強(qiáng)對(duì)事情的拆解分析。
??蒙層的使用阱持，其實(shí)就是展示兩個(gè)元素夭拌，這兩個(gè)元素視覺上覆蓋在頁(yè)面其他元素上。我將這兩個(gè)元素稱為「蒙層元素」和「突出元素」衷咽。只需要將「蒙層元素」的寬高覆蓋整個(gè)頁(yè)面鸽扁，并且讓其z-index高于頁(yè)面其他元素，背景顏色設(shè)為灰色镶骗。然后把「突出元素」z-index值設(shè)高于「蒙層元素」即可桶现。這個(gè)思路最直接，也是最簡(jiǎn)單鼎姊。但應(yīng)該會(huì)有其他不合適的地方骡和，搜索了一下掘金，發(fā)現(xiàn)一篇文章總結(jié)了6種實(shí)現(xiàn)蒙層的方法相寇。以后有需要時(shí)進(jìn)行研讀慰于。
代碼實(shí)現(xiàn)
.shadow {
position: absolute;
top: 0;
left: 0;
z-index: 299;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
img {
display: block;
width: 561px;
height: 353px;
margin-top: 40px;
margin-left: 120px;
}
}
