css盒子遮罩层显示与隐藏

浅浅的花香味﹌ 2022-10-25 04:53 368阅读 0赞

实现效果要如图显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
素材：两张图片  
步骤一：制作一个盒子，记住它的尺寸和大小  
代码如下：

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
第二步:盒子里面放置一张图片，尺寸跟盒子100%对齐就可以了。  
代码如下：

运行结果如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]  
第三步：设置遮罩层盒子。  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子遮罩层的显示与隐藏</title>
        <style>
            .box {
        
                width: 444px;
                height: 320px;
                margin: 100px auto;
                background-color: salmon;
            }
            .box img {
        
                width: 100%;
                height: 100%;
            }
            .box .mask {
        
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;
    
            }
        </style>
    </head>
    <body>
         
        <div class="box">
            
            <img src="images/img.jpg" alt="">
            
            <div class="mask"></div>
        </div>
    </body>
    
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]  
步骤四：目前是标准流盒子，所以上下排布，我们把遮罩层设置为绝对定位，就好了  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子遮罩层的显示与隐藏</title>
        <style>
            .box {
        
                width: 444px;
                height: 320px;
                margin: 100px auto;
                background-color: salmon;
            }
            .box img {
        
                width: 100%;
                height: 100%;
            }
            .box .mask {
        
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
         
        <div class="box">
            
            <img src="images/img.jpg" alt="">
            
            <div class="mask"></div>
        </div>
    </body>
    
    </html>

运行结果如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 5]  
步骤五：因为我们要在父盒子里面全屏显示的话，要设置子绝父相呀。给父亲加上相对定位试试。  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子遮罩层的显示与隐藏</title>
        <style>
            .box {
        
                width: 444px;
                height: 320px;
                margin: 100px auto;
                background-color: salmon;
                position: relative;
            }
            .box img {
        
                width: 100%;
                height: 100%;
            }
            .box .mask {
        
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
         
        <div class="box">
            
            <img src="images/img.jpg" alt="">
            
            <div class="mask"></div>
        </div>
    </body>
    
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 6]  
步骤五:设置成鼠标滑过盒子的时候遮罩层出现。  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子遮罩层的显示与隐藏</title>
        <style>
            .box {
        
                width: 444px;
                height: 320px;
                margin: 100px auto;
                background-color: salmon;
                position: relative;
            }
            .box img {
        
                width: 100%;
                height: 100%;
            }
            .box .mask {
        
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;
                position: absolute;
                top: 0;
                left: 0;
                /* 先让遮罩层隐藏 */
                display: none;
            }
            /* 鼠标滑过盒子的时候遮罩层出现 */
            .box:hover .mask {
        
                display: block;
            }
        </style>
    </head>
    <body>
         
        <div class="box">
            
            <img src="images/img.jpg" alt="">
            
            <div class="mask"></div>
        </div>
    </body>
    
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/c43e9ef036e445d18d0f1acf00ab91ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/d5c262eed90c421984817fdc889d0f8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221024/f1fbc653048e4af4b829b4d5f84fdaed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221024/d5b07940b1bf47ae93ea8fc01cb26d49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]: /images/20221024/cda0e3361f514059b159227eda066e63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 5]: /images/20221024/57db822787ab4e3683742749e2a902ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 6]: /images/20221024/705fb838aa53465aa1ed4d58cbc5dd32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 7]: /images/20221024/553c5e5d21db463480418e967e2b153b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 8]: /images/20221024/71bac11b8f0841478d2c409168e2851a.png