CSS禅意花园 - 特效 - Bonsai Sky（一）

点击数：26192013-01-15 11:11:29　来源: 海盈网络

用富有创造性的图像和代码突破浏览器的限制

为了将“启蒙、开导”的主题推向一个新的高度。Mike Davidson在他的Bonsai Sky作品中把禅意花园修建在了无涯的天际。他以山石嶙岣的峭壁为页面核心，加上树木的点缀，最终完成了这部具有挑战性的作品o而在这副以图片为主导的作品中，Davidson首先面临的就是如何处理文字和图片的平衡。

考虑到这个问题，Davidson将悬崖置于页面的右上方，再加以淡出的效果，从而和左端的文字天衣无缝地衔接了起来。文字部分则使用了宽大的字符间距，逐渐地把浏览者引向了悬崖深处在挺拔的峭壁上镌刻有各种浏览器的标志。更让人为之惊喜的是，悬崖上竟还有一个登山者俯正瞰着深渊——这个人就是Davidson-深刻掌握了要诀的他已经到达了CSS领域中巅峰。

6.3.1．版本问题

然而Bonsai Sky中的一些吸引人的图片却不能在某些浏览器中正确显示，原因在于Davidson使用了一些特别的CSS功能，而这些功能却并不是所有浏览器都能支持的。因此，不同浏览器的用户将会看到不同的视觉效果。但Davidson并没有因为浏览器的兼容性问题而选择放弃，他灵活地运用了一些CSS技巧，成功地避开了这些浏览器的问题。

黑色边框的定位

Bonsai Sky中的黑色边框使用了固定(fixed)定位：


#extraDiv2  {
    background-image:  url(edge_bottom black.gif);
    background-repeat: repeat-x;
    position: fixed;
    bottom:  O；
    left：  100%;
    width: 100%;
    height: 20px,
    margin-left: -100%;
}


    固定定位让元素能够精确地固定在页面中的某个位置上，即使用户滚动页面，固定定位元素在浏览器可视区域中的位置仍然不会改变。其显示效果就如Bonsai Sky中的黑色边框一样，俨然悬浮于页面之上（如图6-3-1—图6-3-3所示）。

    可固定定位的功能在某些浏览器（尤其是Windows平台上的IE）中却不能正确地显示——在这些浏览器中绝对定位元素会跟随其他元素移动。不过若是经过了巧妙的设计，该效果不但在支持固定定位的浏览器中能正确显示，在不支持这种功能的浏览器中的效果也能差强人意。

本文为《CSS禅意花园》连载系列，版权归原作者及出版社所有，请勿用于商业目的活动，我们谨向原作者及CSS禅意花园网站表示敬意。
      海盈网站工作室采用标准的DIV+CSS布局制作各类型企业、行业网站，同时提供手机网站制作、网站维护等全方位专业服务，欢迎咨询。