知向前端
首页
微语
登录
纯css实现兼容很好的点击看大图实例
2015-10-17 Jon
css点击看大图demo
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>点击看大图</title><br /> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> --><br /> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui" /><br /> <style><br /> .showimg>img{width: 200px;}<br /> span{display: none;position:fixed; width: 100%;height: 100%;left:0;top:0;z-index:20;opacity: 0}<br /> .showimg:focus+span{display: block;}<br /> .showimg:focus:before{position:fixed;content:'';z-index: 10px;left:0;top:0;width: 100%;height: 100%;background-color:rgba(0,0,0,.9);}<br /> .showimg:focus>img{z-index: 11; width: auto;height:auto;left:0;position: absolute;top:0;right:0;bottom:0;margin:auto;}<br /> </style><br /> </head><br /> <body><br /> <p>点击查看1</p><br /> <a href="javascript:;" class="showimg"><img src="http://placehold.it/1000x380" alt=""></a><span></span><br /> <p>点击查看2</p><br /> <a href="javascript:;" class="showimg"><img src="http://placehold.it/1000x380" alt=""></a><span></span><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看