纯 CSS 实现 Lightbox 效果

发布于：三言两语, 电脑网络 3,081 次践踏

在我看来，木木算是 CSS 高手了，所以他推荐的 CSS 参考书就一定是好书！我的 CSS 水准一直属于三脚猫半吊子，本来就没有学过专业知识，根本没有系统地学习过 CSS，有这么一本好书，周末就狂啃起来，受益匪浅啊。边看边实践，还意外地在网上挖到一个 CSS 特效——用纯 CSS 打造 Lightbox 效果。

点击下图看效果：

关闭

当然啦，Wordpress 有插件可以实现 Lightbox 效果，我相信也没有人会用纯 CSS 的方法来实现 Lightbox 效果，一方面因为其效果肯定没有原版的 Lightbox 效果帅；二来，CSS 的方法并不是很完善，需要根据不同的图片来设置长宽，不是很方便；三来，这个效果在 IE6 下无法正常显示，有点可惜。不过居然能用 CSS 的方法来间接实现 Lightbox 效果，已经充分显示了 CSS 的强大，我也是通过这个方法深入了解一下 DIV+CSS 的布局。

下面看看完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>纯CSS Lightbox效果</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

以上只是学习 CSS 的一点小结，很水，可忽略～也欢迎 CSS 高手们的板砖～

  36. 效果比想象中还好～
    最近被我那边的CSS折磨的死去活来……
    发现对CSS迷迷糊糊的能看懂点了～
    有时间一定要系统的看看……

    • CSS实现还是很不方便的，需要根据每张图片的大小来修改CSS，学习用可以玩玩，真要用还是推荐插件，或者WP自带的thickbox