« 与读者一起成长，有奖征集“读者故事” | 向Amyni读者致谢，并赠送人民邮电社计算机图书 »

你问我答(21)——破解Kai Laborenz的神秘海底世界

在《CSS设计彻底研究》书的第45页，展示了一个CSS禅意花园的作品，德国设计师Kai Laborenz创作，名称是“海底世界”。我们在书中谈到，这个作品可以称得上所有禅意花园作品中最神奇的一个，大家首先可以仔细看一下这个网页的效果，但是要注意只有Firefox浏览器中才会有完美的表现。有几位读者来信询问这个效果是如何实现的，本文就来做一个解答。

如果读者对“禅意花园”还不清楚，请观看关于禅意花园的视频介绍。

这个页面中表现了一个精致的海底世界，页面很长，浏览器窗口中只能显示很小的一部分。无论如何拖动浏览器的滚动条，页面中的“潜水员”都会在相同的地方，也就是说“潜水员”会在“海水中”上浮或下潜。页面上部的背景比较浅，这意味着在海面附近，越往下“海洋”的背景颜色就会越深，意味着潜水员在不断地下潜。最神奇的是，“潜水员”手中的探照灯竟然可以随着下潜的深度不断变亮。

需要注意，这个网页在FireFox中的效果最好，在IE中虽然可以看出探照灯光的变化，但是由于这个页面使用了特殊技术，背景颜色显示不如在FireFox中自然。在IE 6中，没有任何效果。

那么读者有没有考虑过这个效果完全依靠CSS是如何实现的呢？我在这里给出了一个简化的版本，读者可以看拖动滚动条，看到探照灯的亮度会逐渐发生变化。请使用Firefox或者IE 7浏览器查看，IE 6中没有效果。读者可以先不要看下面结的讲解，想一想能不能自己找到办法实现这个效果。

这个效果是如何产生的呢？请看下图的说明，一共有4层，底层是body元素，上面有三层分别用div定义，id依次次为light、alpha和person。

HTML如下定义：

1
2
3
4
5

<body>
	<div id="light" ><img src="light.png"/></div>
	<div id="person" ><img src="person.png"/></div>
	<div id="alpha"><img src="alpha.png"/></div>	
</body>

CSS的定义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

body{
	background:url('bg.gif');
	height:1100px;
	margin:0px;
}
 
#light{
	position:fixed;
	top:20px;
	left:150px; 
	z-index:10;
}
 
#alpha{
	position:absolute;
	top:0px;
	left:150px;
	z-index:20;
}
 
#person{
	position:fixed;
	top:20px;
	left:150px;
	z-index:30;
}

可以看到#light和#person使用固定（fixed）定位方式，因此在拖动滚动条的时候，它们相对于浏览器窗口位置保持不变，通过z-index属性可以保证这3个div的上下顺序：

#person中放置潜水员的图像，在最上面，因此它总是可见的；

#alpha处于上数第2层，它的图像是一个透明度变化的div，从完全不透逐渐过渡为完全透明；

#light中放置的探照灯的图像，他在#alpha的下面，因此当它处于不透明部分时，就不可见了，而随着滚动条的运动，当他逐渐到透明的部分时，探照灯就逐渐变亮了。

因此这里一共需要用到4个图像，点击可以查看：body的背景图像、灯光图像(白色背景中看不清，下载后到软件中查看)、半透明图像和潜水员图像。

到这里看起来原理并不复杂，问题似乎已经搞清楚了，实际并没有。读者有没有考虑过，“body的背景图像”和“半透明图像”这两个图像不是普通的两个图像，他们有着特殊的要求。因为要看起来二者融合在在一起，看不出边界的存在。旁边两个图中，左图是在Fireworks中观察“半透明图像”的效果，可以看到是一个从深蓝到完全透明的过渡；而当把背景图像放置到他的下面的时候，可以看到二者完全融合起来，看不出任何边界，如右图所示，注意图中的浅蓝色细线是Fireworks软件表示选中对象的线。

因此，如果你来自己做一个背景图像和半透明透明图像的时候，一定要保证重叠的时候二者可以完全融合。如何实现这个要求呢？在制作的时候，首先确定背景图像的渐变色，然后先使上面的半透明图像使用和背景完全一样渐变颜色填充方式进行填充，这样保证二者是可以完全融合的（即看不出二者之间的边界），然后再设置为从完全不透明到完全透明，这样就可以制作出这个“半透明图像”了。这样，在这二者之间插入一个中间层，该层中的对象处于不同位置，被遮盖的程度就会不同（如探照灯的光亮程度），就会显示出不同的效果了。按照这个顺序就可以制作任意颜色的这种效果。读者可以充分发挥想像力，利用这种原理，做出各种不同的效果了。

把这个原理搞懂之后就会发现其实并不复杂，但是Kai Laborenz自己能够想到这种方法，确实令人敬佩，值得我们学习！

点击这里下载本案例的素材和网页zip文件。

如果初学者对CSS的基本知识和定位属性不熟悉，请点击这里观看CSS教学视频。

6,693

这篇文章发表于 2008年03月14日 星期五 9:22 pm，并被分类于你问我答。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论，或者在您自己的网站中引用 (Trackback) 它。



欢迎您发表留言

(须填写)
(须填写,不公开)
请注意：这里输入的HTML代码会被屏蔽，如果需要讨论复杂的具体代码问题，请到我们的论坛发贴，谢谢！

2条留言