日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

    
 
        
            
               
A Picture of food
                

2、為圖片及遮罩層添加樣式

圖片：relative

遮罩層：absolute

使兩者樣式重合。

鼠標(biāo)不在圖片上時(shí)，遮罩層不顯示 .mask { opacity: 0; } 。

.img_div {
    margin: 20px 400px 0 400px;
    position: relative;
    width: 531px;
    height: 354px;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 531px;
    height: 354px;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
}
.mask h4 {
    text-align: center;
}

3、使用hover

改變透明度，使遮罩層顯示。

.img_div a:hover .mask {
    opacity: 1;           
}

效果圖：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS如何實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!