纯 CSS 实现 Lightbox 效果

标签： CSS , lightbox , 图片 | 作者：万戈 | 点击量1823次

　　在我看来，木木算是 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 高手们的板砖～

» 转载请注明来源：Life Studio » 《纯 CSS 实现 Lightbox 效果》

» 本文链接地址：http://wange.im/lightbox-with-css.html

» 订阅本站：http://feed.wange.im

2009-11-15 16:48 分类: 三言两语 , 电脑网络 98 条评论

相关日志

本文已盖 98 层楼

回复爱非鱼说：

2010年07月13日于5:50 下午

拍砖...
可惜我不是css高手,只能说看的懂一点点
回复老七说：

2010年07月3日于12:54 上午

CSS Master?? 看看去~
回复蛋卷说：

2010年07月3日于12:51 上午

这个内容我需要收藏
回复 iamlukas 说：

2010年05月1日于11:39 上午

还在学习啥叫CSS。等学成了就可以学更高级的。
回复 DDBug 说：

2009年11月18日于9:35 下午

CSS Master 确实是一本好书，受益匪浅。推荐阅读原版
- 回复万戈说：
  
  2009年11月18日于9:38 下午
  
  你也看过？看来真是一本好书呀，继续啃！
- 回复说一不二说：
  
  2009年11月20日于5:01 上午
  
  正好说让牛人们推荐一本好书看看
  
  这下不用问就被我发现了，不错
  - 回复万戈说：
    
    2009年11月20日于8:50 上午
    
    确实是本好书啊，我还在啃呢，大家都说好
回复 Yongd 说：

2009年11月18日于7:41 下午

我CSS水平还比不上你
- 回复万戈说：
  
  2009年11月18日于7:44 下午
  
  我也是从别处搬来的啦，呵呵
回复秋天一棵树说：

2009年11月18日于3:42 下午

我在Opera下浏览正文内容好像显示不正常，整体错位，奇怪。
- 回复万戈说：
  
  2009年11月18日于4:42 下午
  
  我用opera测试了下，挺正常的呢，你看其他文章时也错位吗？
回复摩凝(M.Chan) 说：

2009年11月18日于8:47 上午

这个效果如果再完善一点，方便一点，就可以取代插件了，呵呵。
- 回复万戈说：
  
  2009年11月18日于4:47 下午
  
  这个方法还不能取代插件，因为需要根据不同的图片大小来定义CSS中的高宽，挺麻烦的
  - 回复摩凝(M.Chan) 说：
    
    2009年11月18日于4:59 下午
    
    嗯嗯，所以我才说能够方便一点的话。除非看不懂，或者是在太啰嗦太长的文章，俺可都是一字字看完再评论的，所以你文章中说过这话啦
回复 bwskyer 说：

2009年11月17日于9:43 下午

用CSS太麻烦了吧..还是用JS比较好.
- 回复万戈说：
  
  2009年11月18日于4:20 下午
  
  是麻烦，学习用的，真的要实现lightbox，还是建议用JS
回复江流说：

2009年11月17日于9:16 下午

只有特别特别大的图片我才用这效果，一般如何缩小图片不影响观看我就不理了
- 回复万戈说：
  
  2009年11月17日于9:28 下午
  
  我只是用这个效果来学习下CSS而已，呵呵
回复左岸读书说：

2009年11月17日于7:57 下午

千变万化，只为那心动的感觉~
- 回复万戈说：
  
  2009年11月17日于8:07 下午
  
  哈哈，看到这伪lightbox效果，你有心动的感觉？
回复菲萨塔说：

2009年11月17日于10:44 上午

啥效果！难道会有意外惊喜！
- 回复万戈说：
  
  2009年11月17日于11:55 上午
  
  点一下图片你就知道啦
回复 DiDi 说：

2009年11月17日于10:16 上午

你的主题好酷哦...
- 回复万戈说：
  
  2009年11月17日于11:48 上午
  
  呵呵，谢谢，这个主题改自DZ收费主题
回复 Leeiio 说：

2009年11月17日于9:46 上午

呃，话说我都看到javascript的代码了，这个不是纯css哦~
- 回复万戈说：
  
  2009年11月17日于11:43 上午
  
  一点点一点点，忽略不计，嘿嘿
回复 mice 说：

2009年11月16日于10:30 下午

又路过了.........
回复古墓候梅说：

2009年11月16日于9:39 下午

这个是很实用，收藏了。
- 回复万戈说：
  
  2009年11月16日于9:44 下午
  
  效果还不完美，有待修改呢
回复蓝冰说：

2009年11月16日于8:44 下午

我似乎没用任何图片插件……
- 回复万戈说：
  
  2009年11月16日于8:53 下午
  
  我也没有用图片插件哟，我是无插件主义者
回复 LAONB 说：

2009年11月16日于8:21 下午

又见猛料，以后叫你插件猎人算了，消灭一切无用插件
- 回复万戈说：
  
  2009年11月16日于8:46 下午
  
  哈哈，这个效果不能完全代替插件的，我只是学习CSS练习用的
回复 zwwooooo 说：

2009年11月16日于7:19 下午

实用的话还是jQuery吧，css不太懂，总是要copy，记不住啊
- 回复万戈说：
  
  2009年11月16日于7:30 下午
  
  因为最近在学CSS，所以先拿这个做练习而已，jQuery还完全不懂呢。。。
回复 loker 说：

2009年11月16日于5:17 下午

貌似超人哥哥，用的这个。、
- 回复万戈说：
  
  2009年11月16日于6:42 下午
  
  超人哥哥用的应该是插件，没人会用我这么烂的效果的啦，只是学习CSS时用来练练手的
回复 SErHo 说：

2009年11月16日于4:57 下午

我对你的那个博友链接的样式很感兴趣，超人的也是那样，不知道怎么实现的，呵呵。
- 回复万戈说：
  
  2009年11月16日于6:41 下午
  
  哈哈，超人同学的是我给做的，当然一样啦
  你可以参考下：
  http://wange.im/diy-wordpress-links-page.html
  http://wange.im/get-google-favicon-automatically.html
回复飞晏说：

2009年11月16日于4:03 下午

不错啊也来学习一下
不过效果比JavaScript生硬了一些
- 回复万戈说：
  
  2009年11月16日于6:38 下午
  
  仅为学习所用，效果肯定没有javascript的好，那是肯定的
回复回憶说：

2009年11月16日于4:00 下午

那圖太小了
- 回复万戈说：
  
  2009年11月16日于6:37 下午
  
  呵呵，只是举个例子，所以图就随便截了一张
回复 SATURN 说：

2009年11月16日于3:05 下午

其实你也是高手。
回复许哥儿说：

2009年11月16日于3:03 下午

看过，学习，现在在做单子，得认真看看啦。
- 回复万戈说：
  
  2009年11月16日于3:20 下午
  
  建站的单子？高手哇，我连CSS还没搞透彻呢
回复 Hobo 说：

2009年11月16日于2:29 下午

不错哈哈,很轻量级,不过现实效果不如jQuery的哈哈
- 回复万戈说：
  
  2009年11月16日于2:31 下午
  
  当然不能和jquery的比啦，我只是拿来练习一下CSS，呵呵
回复漢文溪说：

2009年11月16日于1:15 下午

哈哈越来越漂亮真好
- 回复万戈说：
  
  2009年11月16日于2:11 下午
  
  谢谢，不过还是比插件的lightbox逊色一些啊
回复集团电话说：

2009年11月16日于1:06 下午

貌似大家都是专业人士哦~~~~
- 回复万戈说：
  
  2009年11月16日于1:11 下午
  
  我是非专业的，只是从别处搬来而已～
回复 Lc. 说：

2009年11月16日于10:59 上午

效果虽然不是太美，但速度够快。。不像用插件的，要等。
- 回复万戈说：
  
  2009年11月16日于11:14 上午
  
  CSS的特点就是比JS要快，这就是我喜欢CSS的原因
回复 keelii 说：

2009年11月16日于10:37 上午

这种东西写的时候最好是把表现，结构，行为分开来写。这样才符合WEB标准哦。
- 回复万戈说：
  
  2009年11月16日于11:08 上午
  
  恩恩，有道理，我疏忽了～
回复 huangjun 说：

2009年11月16日于10:22 上午

看来这段时间，你的博客是以技术文章为主咯！
- 回复万戈说：
  
  2009年11月16日于10:57 上午
  
  我一直想以生活为主，但是总是忍不住就写到技术上了
回复 bolo 说：

2009年11月16日于3:39 上午

还是离不开js，期待CSS3完善
- 回复万戈说：
  
  2009年11月16日于10:07 上午
  
  还是先期待IE能兼容CSS3.0吧～
回复孤夜狂狼说：

2009年11月16日于2:16 上午

效果比想象中还好～
最近被我那边的CSS折磨的死去活来……
发现对CSS迷迷糊糊的能看懂点了～
有时间一定要系统的看看……
- 回复万戈说：
  
  2009年11月16日于10:06 上午
  
  推荐你看看木木介绍的那本书啊，挺不错的呢
回复星网说：

2009年11月16日于1:29 上午

我都不知道我该说啥了！每次来你的博客，我都感觉我好像插不上话！
- 回复星网说：
  
  2009年11月16日于1:31 上午
  
  不对！，事实上，我确实插不上话！
  - 回复星网说：
    
    2009年11月16日于1:34 上午
    
    还有，我的博客回复通知邮件到现在都没有得到解决！唉，我很郁闷！
    - 回复万戈说：
      
      2009年11月16日于10:00 上午
      
      刚刚用免插件的方法实现了回复功能，还在帮你整免插件的邮件通知
- 回复万戈说：
  
  2009年11月16日于9:59 上午
  
  呵呵，随便说啥，盖楼就行～
回复 alswl 说：

2009年11月15日于9:11 下午

折腾精神很值得学习
无折腾，不WP
- 回复万戈说：
  
  2009年11月15日于9:18 下午
  
  恩恩，是啊，咱折腾的就是WP！
回复张楠说：

2009年11月15日于9:08 下午

+
效果不错哦
- 回复万戈说：
  
  2009年11月15日于9:18 下午
  
  呵呵，比插件的lightbox肯定差点，不过将就着勉强算是可以吧
回复午夜说：

2009年11月15日于8:58 下午

有个问题呀，就是背景的黑色遮罩，只是在固定部分。
- 回复万戈说：
  
  2009年11月15日于9:07 下午
  
  是啊，我也发现这个问题，一滚动就漏馅了～所以CSS用作lightbox并不是那么完善
回复我心疯狂说：

2009年11月15日于8:31 下午

纯CSS实现lightbox我之前无意看过一篇外文，效果挺炫的.....但是你这个比较简单又是中文，更合味！
- 回复万戈说：
  
  2009年11月15日于8:41 下午
  
  恩，原版确实是英文的，反正大多数都是代码，我还看的懂，就搬过来了，嘿嘿
回复 Never summer 说：

2009年11月15日于7:36 下午

厲害厲害
我現在是用WP自帶的thickbox實現的
這個CSS竟然也能實現
真是太牛了～！
- 回复万戈说：
  
  2009年11月15日于7:44 下午
  
  CSS实现还是很不方便的，需要根据每张图片的大小来修改CSS，学习用可以玩玩，真要用还是推荐插件，或者WP自带的thickbox
回复超人说：

2009年11月15日于7:35 下午

呃..我还是喜欢用插件~哈哈
- 回复万戈说：
  
  2009年11月15日于7:42 下午
  
  这个肯定没插件好，只是我用来练习CSS的
回复 MuMu'S 说：

2009年11月15日于7:21 下午

不喜欢这种效果。屏幕突然变暗。强奸用户的体验。
- 回复万戈说：
  
  2009年11月15日于7:35 下午
  
  强奸用户。。。。。lightbox也是变黑的呢
回复 ShuaiGe.Me 说：

2009年11月15日于7:00 下午

额，，有些健忘，以前看的都快忘没了，，
- 回复万戈说：
  
  2009年11月15日于7:02 下午
  
  重要是多练习，而且CSS也是在不断更新的，现在都CSS3.0了
回复 keon 说：

2009年11月15日于6:18 下午

CSS的效果还是很强大的
- 回复万戈说：
  
  2009年11月15日于6:46 下午
  
  恩，我还在学习中呢，探索更帅的效果
回复 Zenoven自由人说：

2009年11月15日于5:59 下午

代码还是很强啊。。。赞一个
- 回复万戈说：
  
  2009年11月15日于6:02 下午
  
  CSS很强大吧，怎么学都学不完啊
回复 Louis Han 说：

2009年11月15日于5:54 下午

还真是代码控啊
- 回复万戈说：
  
  2009年11月15日于6:00 下午
  
  还在学习中啊，都是搬别人的代码
回复 A.shun 说：

2009年11月15日于5:42 下午

恩，就算用不上起码告诉别人还可以这样实现
- 回复万戈说：
  
  2009年11月15日于5:47 下午
  
  恩，多个方法，多条路～
回复林木木说：

2009年11月15日于5:29 下午

这个实用性不大，用用练练手耍耍酷不错！
- 回复万戈说：
  
  2009年11月15日于5:35 下午
  
  是没多大实用性，只是学习CSS用的
回复一米说：

2009年11月15日于4:59 下午

推荐的什么书啊？给我说下，我也要。
- 回复万戈说：
  
  2009年11月15日于5:02 下午
  
  你顺着链接去就是了，木木有提供下载，是PDF的，看起来有点累
  - 回复张三说：
    
    2009年11月15日于5:14 下午
    
    还是要求本地的图吧？
    - 回复万戈说：
      
      2009年11月15日于5:14 下午
      
      不是啊，我用skydrive外链的

Life Studio