CSS样式-土豆视频页面.html

方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style type="text/css">
        .container {
            width: 212px;
            height: 318px;
            position: relative;
        }

        .container>img {
            width: 100%;
            height: 100%;
        }

        .container>.mask {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAA3lBMVEUAAAD/ZwD/gQD/bgD/eAD/iwD/fQD/dAD/hQD/awD/cQD/ewH/hwD/iAD/jgD/hwD/fgD//v3/kQD/dwD/aQD/dwD/dwD/awD/iQD/aAD/jAD/ZwD/bAD/iwD/aAD/hgD/aQD/jwD/awD/8OT/7d3/1LD/w5D/wIT/p1r/oUr/kTH/jR3/hQ7/bwD/ZwD/ZwD/jQD/hgD/kQD/ZwD/kQD/ZwD/jwD/kQD/fgD/cgD/ZwD/kwD/gAD/+fX/+PP/9+//59L/38T/z6L/smz/oUX/gAD/fgD/gwD/gQD////4hG+/AAAASXRSTlMAzMzMzMzMzMzMzMzMzMwJzP7Fw8GumYyEhFxcQjs7KCgZGfj37Obj29jU0M7GxsPAwK6umZmMfX19fUJC/Pv69PHp3tfGxoyMsWZZPgAAAVpJREFUOMuNlOl2gjAQhRMgqKAguEGLtnXfaje1+77y/i9U0lAmmeb0eH9/595MMjdEkp9ct1uNRqt9decTnQ47x6ZTKlmWZdv2x9fBH6AfV0wzQzjj2rZhGNGRSvSaFCPls65M7FPKEYcHFUi5tocIjoALZ6rA9CjVulQZy7P6zRyBs9QFUmOn4swxBQQFMRb93AelEIRdmMfvpwOIORrMkAvbEuKvcoIjQRqMXQXxQp8kVHJJMz3NFcS7JTcYSe9fxdA5ckk2EuKkQqOlcGEcWZML1UVo8CZcOHNOTpCLUDArgkJAwIVrUhw31AelwwVH8qCNDnlZwkRrGBrO8jhVh05+iQJ5XqCr81eqSzCR9iVT6KvP+JAO5+ilt+oymNOxCy8Ny0Di//Yl0i0muIjFhPWu5IilIF25JFSD4CJBEFQNFxZXDQqLam9B7XWfR9HG+vsnfB47fEHflFU44X1DIqkAAAAASUVORK5CYII=);
            background-repeat: no-repeat;
            background-position: center center;
            background-color: rgba(0, 0, 0, 0.4);
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0; 
        }
            
        .container:hover>.mask {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="images/video.jpg" />
        <div class="mask"></div>
    </div>
</body>
</html>
 
方式二：用after伪对象实现
<!DOCTYPE html>
<html lang="en">
<head>
 
    <title>Document</title>
    <style type="text/css">
        .container {
            width: 212px;
            height: 318px;
            position: relative;
        }

        .container>img {
            width: 100%;
            height: 100%;
        }

        .container:hover:after {
            content: '';
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAA3lBMVEUAAAD/ZwD/gQD/bgD/eAD/iwD/fQD/dAD/hQD/awD/cQD/ewH/hwD/iAD/jgD/hwD/fgD//v3/kQD/dwD/aQD/dwD/dwD/awD/iQD/aAD/jAD/ZwD/bAD/iwD/aAD/hgD/aQD/jwD/awD/8OT/7d3/1LD/w5D/wIT/p1r/oUr/kTH/jR3/hQ7/bwD/ZwD/ZwD/jQD/hgD/kQD/ZwD/kQD/ZwD/jwD/kQD/fgD/cgD/ZwD/kwD/gAD/+fX/+PP/9+//59L/38T/z6L/smz/oUX/gAD/fgD/gwD/gQD////4hG+/AAAASXRSTlMAzMzMzMzMzMzMzMzMzMwJzP7Fw8GumYyEhFxcQjs7KCgZGfj37Obj29jU0M7GxsPAwK6umZmMfX19fUJC/Pv69PHp3tfGxoyMsWZZPgAAAVpJREFUOMuNlOl2gjAQhRMgqKAguEGLtnXfaje1+77y/i9U0lAmmeb0eH9/595MMjdEkp9ct1uNRqt9decTnQ47x6ZTKlmWZdv2x9fBH6AfV0wzQzjj2rZhGNGRSvSaFCPls65M7FPKEYcHFUi5tocIjoALZ6rA9CjVulQZy7P6zRyBs9QFUmOn4swxBQQFMRb93AelEIRdmMfvpwOIORrMkAvbEuKvcoIjQRqMXQXxQp8kVHJJMz3NFcS7JTcYSe9fxdA5ckk2EuKkQqOlcGEcWZML1UVo8CZcOHNOTpCLUDArgkJAwIVrUhw31AelwwVH8qCNDnlZwkRrGBrO8jhVh05+iQJ5XqCr81eqSzCR9iVT6KvP+JAO5+ilt+oymNOxCy8Ny0Di//Yl0i0muIjFhPWu5IilIF25JFSD4CJBEFQNFxZXDQqLam9B7XWfR9HG+vsnfB47fEHflFU44X1DIqkAAAAASUVORK5CYII=);
            background-repeat: no-repeat;
            background-position: center center;
            background-color: rgba(0, 0, 0, 0.4);
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0; 
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="images/video.jpg" />
    </div>
</body>
</html>
posted @ 2021-03-28 14:28  #Friday  阅读(359)  评论(0)    收藏  举报