仿土豆网显示隐藏遮罩案例（HTML、CSS）

电玩女神 2023-10-03 13:17 2阅读 0赞

### 仿土豆网显示隐藏遮罩案例（HTML、CSS） ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>仿土豆网显示隐藏遮罩案例</title>
        <style>
            .tudou {
        
                position: relative;
                width: 444px;
                height: 320px;
                background-color: pink;
                margin: 30px auto;
            }
    
            .tudou img {
        
                width: 100%;
                height: 100%;
            }
    
            .mask {
        
                /* 隐藏遮罩层 */
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
            }
    
            /* 当我们鼠标经过了 土豆这个盒子，就让里面遮罩层显示出来 */
            .tudou:hover .mask {
        
                /* 而是显示元素 */
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div class="tudou">
            <div class="mask"></div>
            <img src="images/tudou.jpg" alt="">
        </div>
    
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例(CSS3)

伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例(CSS3) <!DOCTYPE html> <html lang="en"> <hea

快来打我*/ 2023年10月03日 13:32/ 0 赞/ 1 阅读

相关仿土豆网显示隐藏遮罩案例（HTML、CSS）

仿土豆网显示隐藏遮罩案例（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

电玩女神/ 2023年10月03日 13:17/ 0 赞/ 3 阅读

相关仿京东显示隐藏密码

![在这里插入图片描述][2020061221083895.gif] 素材 ![在这里插入图片描述][20200612210927899.png] ![在这里插入图

刺骨的言语ヽ痛彻心扉/ 2023年02月17日 06:16/ 0 赞/ 59 阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 378 阅读

相关 css盒子遮罩层显示与隐藏

实现效果要如图显示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

浅浅的花香味﹌/ 2022年10月25日 04:53/ 0 赞/ 422 阅读

相关 js点击遮罩层内容以外的地方隐藏遮罩

combatBoxc内容区域 combatBox整个遮罩层最外面的div > <div class="combatBox" style="display: bl

ゞ浴缸里的玫瑰/ 2022年10月14日 15:57/ 0 赞/ 310 阅读

相关 iframe 隐藏域下载文件显示遮罩层

html: <iframe id="loadFileHide" style="display:none;"></iframe> javascript:

我会带着你远行/ 2022年07月17日 00:39/ 0 赞/ 256 阅读

相关 JS+CSS简单实现DIV遮罩层显示隐藏

http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html [JS+CSS简单实现DIV遮罩层显示隐藏]

忘是亡心i/ 2022年07月16日 08:15/ 0 赞/ 349 阅读

相关遮罩

<div class =“modal-backdrop in”id =“loadingModal”style =“display：none; z-index：20000

系统管理员/ 2022年05月26日 00:19/ 0 赞/ 336 阅读

相关 iframe 遮罩 object

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] .my\_iframe \{ position: a

朴灿烈づ我的快乐病毒、/ 2022年01月16日 05:37/ 0 赞/ 370 阅读