纯css实现兼容很好的点击看大图实例

2015-10-17 Jon html+css

css点击看大图demo

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>点击看大图</title>
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> -->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui" />
    <style>
      .showimg>img{width: 200px;}
      span{display: none;position:fixed; width: 100%;height: 100%;left:0;top:0;z-index:20;opacity: 0}
      .showimg:focus+span{display: block;}
      .showimg:focus:before{position:fixed;content:'';z-index: 10px;left:0;top:0;width: 100%;height: 100%;background-color:rgba(0,0,0,.9);}
      .showimg:focus>img{z-index: 11; width: auto;height:auto;left:0;position: absolute;top:0;right:0;bottom:0;margin:auto;}
    </style>
  </head>
  <body>
    <p>点击查看1</p>
    <a href="javascript:;" class="showimg"><img src="http://placehold.it/1000x380" alt=""></a><span></span>
    <p>点击查看2</p>
    <a href="javascript:;" class="showimg"><img src="http://placehold.it/1000x380" alt=""></a><span></span>
  </body>
  </html>

您可以修改框中代码后运行查看

标签: 大图查看