纯 CSS 实现 Lightbox 效果

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

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

本文已盖 98 层楼

  1. 回复 爱非鱼 说:

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

  2. 回复 老七 说:

    CSS Master?? 看看去~

  3. 回复 蛋卷 说:

    这个内容我需要收藏

  4. 回复 iamlukas 说:

    还在学习啥叫CSS。等学成了就可以学更高级的。 :twisted:

  5. 回复 DDBug 说:

    CSS Master 确实是一本好书,受益匪浅。推荐阅读原版

  6. 回复 Yongd 说:

    我CSS水平还比不上你 :arrow:

  7. 我在Opera下浏览正文内容好像显示不正常,整体错位,奇怪。

  8. 这个效果如果再完善一点,方便一点,就可以取代插件了,呵呵。 :razz:

  9. 回复 bwskyer 说:

    用CSS太麻烦了吧..还是用JS比较好.

  10. 回复 江流 说:

    只有特别特别大的图片我才用这效果,一般如何缩小图片不影响观看我就不理了

  11. 千变万化,只为那心动的感觉~

  12. 回复 菲萨塔 说:

    啥效果!难道会有意外惊喜!

  13. 回复 DiDi 说:

    你的主题好酷哦...

  14. 回复 Leeiio 说:

    呃,话说我都看到javascript的代码了,这个不是纯css哦~ :arrow:

  15. 回复 mice 说:

    :!: 又路过了.........

  16. 这个是很实用,收藏了。

  17. 回复 蓝冰 说:

    我似乎没用任何图片插件…… :mad:

  18. 回复 LAONB 说:

    又见猛料,以后叫你插件猎人算了,消灭一切无用插件 :cool:

  19. 回复 zwwooooo 说:

    实用的话还是jQuery吧,css不太懂,总是要copy,记不住啊

  20. 回复 loker 说:

    貌似超人哥哥,用的这个。、

  21. 回复 SErHo 说:

    我对你的那个博友链接的样式很感兴趣,超人的也是那样,不知道怎么实现的,呵呵。

  22. 回复 飞晏 说:

    不错啊 也来学习一下
    不过效果比JavaScript生硬了一些

  23. 回复 SATURN 说:

    其实你也是高手。

  24. 回复 许哥儿 说:

    看过,学习,现在在做单子,得认真看看啦。

  25. 回复 Hobo 说:

    不错哈哈,很轻量级,不过现实效果不如jQuery的哈哈

  26. 回复 漢文溪 说:

    哈哈 越来越漂亮 真好

  27. 貌似大家都是专业人士哦~~~~

  28. 回复 Lc. 说:

    效果虽然不是太美,但速度够快。。 不像用插件的,要等。 :twisted:

  29. 回复 keelii 说:

    这种东西写的时候最好是把表现,结构,行为分开来写。这样才符合WEB标准哦。

  30. 回复 huangjun 说:

    看来这段时间,你的博客是以技术文章为主咯!

  31. 回复 bolo 说:

    还是离不开js,期待CSS3完善

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

  33. 回复 星网 说:

    :arrow: 我都不知道我该说啥了!每次来你的博客,我都感觉我好像插不上话!

  34. 回复 alswl 说:

    折腾精神很值得学习
    无折腾,不WP

  35. 回复 张楠 说:

    :cool: :cool: +
    效果不错哦

  36. 回复 午夜 说:

    有个问题呀,就是背景的黑色遮罩,只是在固定部分。

  37. 纯CSS实现lightbox我之前无意看过一篇外文,效果挺炫的.....但是你这个比较简单又是中文,更合味!

  38. 厲害厲害
    我現在是用WP自帶的thickbox實現的
    這個CSS竟然也能實現
    真是太牛了~!

    • 回复 万戈 说:

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

  39. 回复 超人 说:

    呃..我还是喜欢用插件~哈哈

  40. 回复 MuMu'S 说:

    不喜欢这种效果。屏幕突然变暗。强奸用户的体验。

  41. 额,,有些健忘,以前看的都快忘没了,,

  42. 回复 keon 说:

    CSS的效果还是很强大的 :oops:

  43. 代码还是很强啊。。。赞一个

  44. 回复 Louis Han 说:

    还真是代码控啊

  45. 回复 A.shun 说:

    恩,就算用不上起码告诉别人还可以这样实现

  46. 回复 林木木 说:

    这个实用性不大,用用练练手耍耍酷不错!

  47. 回复 一米 说:

    推荐的什么书啊?给我说下,我也要。

Leave a comment

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析