zoukankan      html  css  js  c++  java
  • HTML 练习实现遮罩层

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .left{
                float: left;
            }
    
            .clearfix:after{
                content: '.';
                display: block;
                clear: both;
                visibility: hidden;
                height: 0;
            }
    
            .container{
                background-color: red;
            }
    
            .container .item{
                 180px;
                height: 150px;
                background-color: #303a40;
                border: 1px solid red;
                overflow: hidden;
                position: relative;
            }
    
            .container .item:hover{
                border: 1px solid green;
            }
    
            .container .item .text{
                display: none;
            }
    
            .container .item:hover .text{
                display: block;
            }
        </style>
    </head>
    <body>
    <div class="container clearfix">
        <div class="item left">
            <div class="bg">
                <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552466288&di=2833711b147f456e54b1e555602e4694&src=http://hbimg.b0.upaiyun.com/01f13dd8fcbfcfd38bd13f92cca49a0bd8ec434b12cea-0yEhtq_fw658" style="height: 150px;  180px;">
            </div>
            <div class="text">
                <div style="z-index:9;  position:absolute; left:0; right:0; top:0; bottom:0; background-color: black; opacity:0.6;"></div>
                <div style="z-index:10; position:absolute; left:0; right:0; top:0; bottom:0;">1000</div>
            </div>
        </div>
    </div>
    
    </body>
    </html>
    
  • 相关阅读:
    codeforces 862B
    codeforces 863B
    codeforces 864B
    codeforces 867B
    codeforces 868B Race Against Time
    codeforces 869B The Eternal Immortality
    CodeForces
    nyoj 括号配对问题(模拟栈的过程)
    HDU
    nyoj 119 士兵杀敌(三)线段树
  • 原文地址:https://www.cnblogs.com/klvchen/p/10524129.html
Copyright © 2011-2022 走看看