html css视频播放效果案例

最新推荐文章于 2024-09-09 06:59:41 发布

黄丫丫07

最新推荐文章于 2024-09-09 06:59:41 发布

阅读量451

点赞数 2

文章标签： html5 css

本文链接：https://blog.csdn.net/m0_51495354/article/details/127927273

版权

1disply显示隐藏元素但是不保留位置

2visibility实现隐藏元素但是保留原来的位置

3overflow溢出显示隐藏但是只是对于溢出的部分处理

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>仿土豆网</title>

    <style>

        .tudou {

            position: relative;

            width: 846px;

            height: 472px;

            background-color: aquamarine;

            margin: 100px auto;

        }



        .mask {

            /* 隐藏遮罩层 */

            display: none;

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, .3) url(images/播放.png) no-repeat center;



        }



        /* 当我们鼠标经过了 土豆这个盒子 就让里面的遮罩层显示出来 */

        .tudou:hover .mask {

            display: block;

        }

    </style>

</head>



<body>

    <div class="tudou">

        <div class="mask"></div>

        <img src="images/tb.jpg" alt="">

    </div>

</body>



</html>