超酷堆叠图片展开和折叠

2019-09-10 郑州网站建设  

<!DOCTYPE html>

<html lang="zh">

<head>

         <meta charset="UTF-8">

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

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

         <title>超酷堆叠图片展开和折叠</title>

         <meta name="keywords" content="超酷堆叠图片展开和折叠" />

         <meta name="description" content="超酷堆叠图片展开和折叠" />

         <link rel="stylesheet" type="text/css" href=http://www.divcss5.com/html5/"css/bootstrap.css" />

         <link rel="stylesheet" type="text/css" href=http://www.divcss5.com/html5/"css/htmleaf-demo.css">

         <style type="text/css">

                   body{overflow:hidden;}

                   .t-container{position:absolute;top:0;left:0;}

                   .t-container .t-content{position:absolute;top:0;left:0;width:400px;height:225px;}

                   .t-container .t-content img{position:absolute;width:400px;height:225px;}

                   .t-container .t-content .cover{position:absolute;top:0;left:0;background-color:rgba(0, 0, 0, 0.75);width:400px;height:225px;}

                  .container{position:absolute;-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%;bottom:50px;}

                   .container .btn{z-index:9999;}

         </style>

</head>

<body>

        

                   <div class="t-container">

 

                            <div class="t-content">

                                     <img class="t-img" src=http://www.divcss5.com/html5/"img/img0.jpg" alt="" />

                                     <div class="cover"></div>

                            </div>

                           

                            <div class="t-content">


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1882.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • !
  • =
  • zh
  • lang